{"id":22485576,"url":"https://github.com/leafOfTree/svelte-lazy","last_synced_at":"2025-08-02T18:32:58.702Z","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-03-13T04:25:19.000Z","size":1175,"stargazers_count":136,"open_issues_count":5,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T07:37:35.794Z","etag":null,"topics":["lazy","lazyload","svelte"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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}},"created_at":"2019-08-02T03:07:48.000Z","updated_at":"2024-04-12T06:29:38.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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499980,"owners_count":17929990,"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","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-12-06T17:12:51.879Z","updated_at":"2024-12-06T17:14:43.405Z","avatar_url":"https://github.com/leafOfTree.png","language":"Svelte","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","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"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"}