{"id":21524892,"url":"https://github.com/degjs/lazy","last_synced_at":"2025-03-17T18:17:56.766Z","repository":{"id":52088687,"uuid":"146210551","full_name":"DEGJS/lazy","owner":"DEGJS","description":"A lazy loader based on the IntersectionObserver API","archived":false,"fork":false,"pushed_at":"2022-12-02T10:18:47.000Z","size":122,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-24T05:24:12.229Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEGJS.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}},"created_at":"2018-08-26T19:35:55.000Z","updated_at":"2021-01-26T19:53:55.000Z","dependencies_parsed_at":"2023-01-22T15:00:16.731Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/lazy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Flazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Flazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Flazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Flazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/lazy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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":[],"created_at":"2024-11-24T01:30:22.166Z","updated_at":"2025-03-17T18:17:56.741Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lazy\nLazy is a generic asset lazy loader. Assets will load right before they scroll into the viewport. By default, Lazy will lazy load images, but it can also be configured to fire a generic callback whenever any element enters the viewport, making it useful for loading or animating practically any element or asset type. \n\n## Usage\nSample Javascript:\n```js\nimport lazy from \"lazy.js\";\n\n/* Instantiate Lazy, with options */\nconst lazyOptions = {\n    animationClass: 'fade-in',\n    rootMargin: '200px 0px'\n};\n\nlazy(lazyOptions);\n```\n\nSample Markup:\n```html\n\u003cimg data-lazy data-src=\"https://placehold.it/1024x768\" alt=\"Lazy loaded image using img element\"\u003e\n\n\u003cpicture\u003e\n    \u003csource data-lazy data-srcset=\"https://placehold.it/1024x768\" media=\"(min-width: 1000px)\"\u003e\n    \u003cimg data-lazy data-src=\"https://placehold.it/512x384\" alt=\"Lazy loaded image using picture element\"\u003e\n\u003c/picture\u003e\n```\n\n## Options\n#### options.elSelector\nType: `String`   \nThe name of the selector for elements that should be lazy loaded.  \nDefault: `data-lazy`\n\n#### options.animationClass\nType: `String`   \nAn optional CSS class that will be applied to elements as they're lazy loaded in.  \nDefault: `null`\n\n#### options.root\nType: `Element`   \nThe element that is used as the viewport for checking visiblity of the target, from the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options).  \nDefault: `null`\n\n#### options.rootMargin\nType: `String`  \nThe margin around the root, from the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options).  \nDefault: `200px 0px`\n\n#### options.threshold\nType: `Number`  \nEither a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. From the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options).  \nDefault: `0.1`\n\n#### options.onIntersectionCallback\nType: `Function`  \nReturns: `Element`  \nAn optional callback that will override the default image-loading behavior, and simply return the observed element that has entered the viewport.  \nDefault: `null`\n\n## Methods\n\n### .observe(els)\nParameters: `els`  \nAn element or array of elements to begin observing.\n\n### .load(els)\nParameters: `els`  \nAn element or array of elements to load immediately.\n\n## Browser Support\nLazy depends on the following browser APIs:\n+ IntersectionObserver: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | [Polyfill](https://github.com/w3c/IntersectionObserver) (Note: in legacy browsers that don't support IntersectionObserver, elements tagged for lazy loading will still be lazy loaded, but it will occur immediately on page load, rather than when they enter the viewport))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Flazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Flazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Flazy/lists"}