{"id":16227709,"url":"https://github.com/leafoftree/svelte-lazy","last_synced_at":"2025-10-08T03:52:34.317Z","repository":{"id":41319181,"uuid":"200155731","full_name":"leafOfTree/svelte-lazy","owner":"leafOfTree","description":"A svelte component to lazyload any content including images","archived":false,"fork":false,"pushed_at":"2024-11-28T05:49:07.000Z","size":1358,"stargazers_count":149,"open_issues_count":2,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-04T12:03:08.302Z","etag":null,"topics":["lazy","lazyload","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leafOfTree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-02T03:07:48.000Z","updated_at":"2025-05-29T01:50:07.000Z","dependencies_parsed_at":"2024-03-13T05:29:27.137Z","dependency_job_id":"6196aade-3533-4836-85be-2f1feacba1a3","html_url":"https://github.com/leafOfTree/svelte-lazy","commit_stats":{"total_commits":151,"total_committers":6,"mean_commits":"25.166666666666668","dds":0.07947019867549665,"last_synced_commit":"cd67ca1446afc03437d39bfb1459160a7dccff2f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leafOfTree/svelte-lazy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-lazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-lazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-lazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-lazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leafOfTree","download_url":"https://codeload.github.com/leafOfTree/svelte-lazy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-lazy/sbom","scorecard":{"id":581656,"data":{"date":"2025-08-11","repo":{"name":"github.com/leafOfTree/svelte-lazy","commit":"cc514695bc1fa8eb2b612e72b62b824ad558b18b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/22 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/node.js.yml:1","Info: topLevel 'contents' permission set to 'read': .github/workflows/static.yml:14","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/node.js.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/node.js.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/static.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/static.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/static.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/leafOfTree/svelte-lazy/static.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/node.js.yml:31","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: UNLICENSE:0","Info: FSF or OSI recognized license: The Unlicense: UNLICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 9 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":7,"reason":"3 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T19:20:00.312Z","repository_id":41319181,"created_at":"2025-08-20T19:20:00.312Z","updated_at":"2025-08-20T19:20:00.312Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278886413,"owners_count":26062975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lazy","lazyload","svelte"],"created_at":"2024-10-10T12:53:37.494Z","updated_at":"2025-10-08T03:52:34.281Z","avatar_url":"https://github.com/leafOfTree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/svelte-lazy.svg\" width=\"60\" height=\"60\" alt=\"icon\" align=\"left\"/\u003e\n\n# svelte-lazy [![npm version][3]][4]\n\nA svelte component to lazyload any content.\n\n- [Demo on svelte.dev/repl][5]\n- [Examples][7] and [their code][8]\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"demo image\" src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/HEAD/svelte-lazy.png\" width=\"120\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n    npm i svelte-lazy\n\nFor sapper server-side rendering which requires [using external components][6], install it to `devDependencies`:\n\n    npm i -D svelte-lazy\n\n## Usage\n\n```html\n\u003cscript\u003e\n  import Lazy from 'svelte-lazy';\n\u003c/script\u003e\n\n\u003cLazy height={300}\u003e\n  \u003cimg alt=\"\" src=\"https://picsum.photos/id/412/200/300\" /\u003e\n\u003c/Lazy\u003e\n```\n\n## Props\n\n- **height**: *Number|String*. Default: `0` (px).\n    - Height of the component before load. \n    - **Set a proper value** to avoid scroll bounce. You can use the content height shown by the DevTools Inspector after loading.\n\n- **keep**: *Boolean*. Default: `false`.\n  - By default elements get unloaded after leaving view, set to `true` to keep all loaded ones after first appearance.\n\n- **offset**: *Number*. Default: `150` (px). \n    - Offset from the top of the component to the bottom of the viewport that triggers loading when in it.\n\n- **placeholder**: *String|Component*. Default: `null`. \n    - Placeholder before load.\n\n- **placeholderProps**: *Object*. Default `null`. \n    - Props for when using a component as a placeholder.\n\n- **class**: *String*. Default: `''`. \n    - Additional class for the container div. It will be `svelte-lazy ${class}`.\n\n- **fadeOption**: *Object*. Default: `{ delay: 0, duration: 400 }`. \n    - Option for the fade in transition. Set `null` to disable it.\n\n- **onload**: *Function (node) =\u003e {}*. Default: `null`. \n    - Function that is called when loaded.\n\n- **resetHeightDelay**: *Number*. Default: `0` (milliseconds). \n    - The delay to reset the component height to `auto` after loaded. Might be useful to wait for remote resources like images.\n\n## Changelog\n\nv1.2.2\n- Support svelte 3 \u0026 4\n- Load/unload when enters/leaves view\n\nv0 -\u003e v1.0\n\n- Adjust dom structure\n- Optimize image loading\n\n## Life cycle\n\n```\n            enter viewport  / no image                 -\u003e loaded\nnot loaded  --------------\u003e\n                            \\ with image -\u003e load event -\u003e loaded\n                                                |\n                                                |\n            show placeholder                    |     show content\n``` \n\n## DOM structure\n\nBefore load\n```html\n\u003cdiv class=\"svelte-lazy ${class}\"\u003e\n    \u003cdiv class=\"svelte-lazy-placeholder\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\nAfter load\n```html\n\u003cdiv class=\"svelte-lazy ${class}\"\u003e\n    \u003cdiv class=\"svelte-lazy-content\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Development\n\n    git clone https://github.com/leafOfTree/svelte-lazy\n    cd svelte-lazy\n    npm i\n    npm start\n\n## Test\n\n    npm test\n\n## Publish\n\nFor maintenance, bump the version in `package.json` then run `npm publish`.\n\n## Refs\n\nBased on [sveltejs/component-template: A base for building shareable Svelte components](https://github.com/sveltejs/component-template)\n\n[1]: https://travis-ci.com/leafOfTree/svelte-lazy.svg?branch=master\n[2]: https://travis-ci.com/leafOfTree/svelte-lazy\n[3]: https://img.shields.io/npm/v/svelte-lazy.svg\n[4]: https://www.npmjs.com/package/svelte-lazy\n[5]: https://svelte.dev/repl/6d7714fa3cce4909af6c6d187271e0a1\n[6]: https://github.com/sveltejs/sapper-template#using-external-components\n[7]: https://leafoftree.github.io/svelte-lazy/\n[8]: https://github.com/leafOfTree/svelte-lazy/blob/master/test/index.svelte\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafoftree%2Fsvelte-lazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleafoftree%2Fsvelte-lazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafoftree%2Fsvelte-lazy/lists"}