{"id":13397839,"url":"https://github.com/verlok/vanilla-lazyload","last_synced_at":"2025-12-12T04:02:06.090Z","repository":{"id":23093946,"uuid":"26447951","full_name":"verlok/vanilla-lazyload","owner":"verlok","description":"LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain \"vanilla\" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.","archived":false,"fork":false,"pushed_at":"2025-07-21T23:06:54.000Z","size":5512,"stargazers_count":7824,"open_issues_count":14,"forks_count":673,"subscribers_count":115,"default_branch":"master","last_synced_at":"2025-09-05T19:31:06.232Z","etag":null,"topics":["hacktoberfest","iframes","images","intersectionobserver","lazy-loading","lazy-sizes","lazyload","lazyload-iframes","lazyload-images","lazyload-script","lazyload-videos","picture","picture-tag","responsive-images","srcset","srcset-sizes","vanilla-javascript","vanilla-js","videos","webp"],"latest_commit_sha":null,"homepage":"https://www.andreaverlicchi.eu/vanilla-lazyload/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/verlok.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":"funding.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":"verlok","ko_fi":"verlok","custom":"https://www.paypal.me/verlok"}},"created_at":"2014-11-10T17:49:35.000Z","updated_at":"2025-09-04T21:14:43.000Z","dependencies_parsed_at":"2023-02-17T05:15:55.373Z","dependency_job_id":"1e2c6e73-2be6-48f4-9fc1-92defa67be4d","html_url":"https://github.com/verlok/vanilla-lazyload","commit_stats":{"total_commits":1314,"total_committers":45,"mean_commits":29.2,"dds":0.5319634703196348,"last_synced_commit":"088826f926dfae7dfa8849456c21571d76b28c4f"},"previous_names":["verlok/lazyload"],"tags_count":178,"template":false,"template_full_name":null,"purl":"pkg:github/verlok/vanilla-lazyload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verlok%2Fvanilla-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verlok%2Fvanilla-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verlok%2Fvanilla-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verlok%2Fvanilla-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/verlok","download_url":"https://codeload.github.com/verlok/vanilla-lazyload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/verlok%2Fvanilla-lazyload/sbom","scorecard":{"id":918914,"data":{"date":"2025-08-11","repo":{"name":"github.com/verlok/vanilla-lazyload","commit":"c0f2392c765b5651e1a4adb77159d9a469c26627"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/26 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":"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/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/playwright.yml:1","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":"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":"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":"Pinned-Dependencies","score":1,"reason":"dependency not pinned by hash detected -- score normalized to 1","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/verlok/vanilla-lazyload/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/verlok/vanilla-lazyload/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/playwright.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/verlok/vanilla-lazyload/playwright.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/playwright.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/verlok/vanilla-lazyload/playwright.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/playwright.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/verlok/vanilla-lazyload/playwright.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:27","Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned","Info: 1 out of 2 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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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 5 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":5,"reason":"5 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv"],"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-24T23:34:11.045Z","repository_id":23093946,"created_at":"2025-08-24T23:34:11.045Z","updated_at":"2025-08-24T23:34:11.045Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273847269,"owners_count":25178649,"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-09-06T02:00:13.247Z","response_time":2576,"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":["hacktoberfest","iframes","images","intersectionobserver","lazy-loading","lazy-sizes","lazyload","lazyload-iframes","lazyload-images","lazyload-script","lazyload-videos","picture","picture-tag","responsive-images","srcset","srcset-sizes","vanilla-javascript","vanilla-js","videos","webp"],"created_at":"2024-07-30T18:01:48.131Z","updated_at":"2025-12-12T04:02:00.474Z","avatar_url":"https://github.com/verlok.png","language":"JavaScript","funding_links":["https://github.com/sponsors/verlok","https://ko-fi.com/verlok","https://www.paypal.me/verlok"],"categories":["JavaScript","Uncategorized","hacktoberfest","Table of Contents"],"sub_categories":["Uncategorized","Image Libraries"],"readme":"LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to **when they will enter the viewport**. It's written in plain \"vanilla\" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [all features](#-all-features-compared) for more.\n\n[![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)\n[![vanilla-lazyload (downloads)](https://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)\n[![](https://data.jsdelivr.com/v1/package/npm/vanilla-lazyload/badge)](https://www.jsdelivr.com/package/npm/vanilla-lazyload)\n[![](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml/badge.svg)](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml)\n\nāž”ļø Jump to: [šŸ‘Øā€šŸ’» Getting started - HTML](#-getting-started---html) - [šŸ‘©ā€šŸ’» Getting started - Script](#-getting-started---script) - [šŸ„§ Recipes](#-recipes) - [šŸ“ŗ Demos](#-demos) - [šŸ˜‹ Tips \u0026 tricks](#-tips--tricks) - [šŸ”Œ API](#-api) - [šŸ˜Æ All features compared](#-all-features-compared)\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ‘Øā€šŸ’» Getting started - HTML\n\nIn order to make your content be loaded by LazyLoad, you must use some `data-` attributes instead of the actual attributes. Examples below.\n\n### Lazy image:\n\n```html\n\u003cimg alt=\"A lazy image\" class=\"lazy\" data-src=\"lazy.jpg\" /\u003e\n```\n\n### Lazy image with low quality placeholder:\n\n```html\n\u003cimg alt=\"A lazy image\" class=\"lazy\" src=\"lazy-lowQuality.jpg\" data-src=\"lazy.jpg\" /\u003e\n```\n\n### Lazy responsive image with `srcset` and `sizes`:\n\n```html\n\u003cimg\n alt=\"A lazy image\"\n class=\"lazy\"\n data-src=\"lazy.jpg\"\n data-srcset=\"lazy_400.jpg 400w, \n lazy_800.jpg 800w\"\n data-sizes=\"100w\"\n/\u003e\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy responsive image with hi-dpi support using the `picture` tag:\n\n```html\n\u003cpicture\u003e\n \u003csource media=\"(min-width: 1200px)\" data-srcset=\"lazy_1200.jpg 1x, lazy_2400.jpg 2x\" /\u003e\n \u003csource media=\"(min-width: 800px)\" data-srcset=\"lazy_800.jpg 1x, lazy_1600.jpg 2x\" /\u003e\n \u003cimg alt=\"A lazy image\" class=\"lazy\" data-src=\"lazy.jpg\" /\u003e\n\u003c/picture\u003e\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:\n\n```html\n\u003cpicture\u003e\n \u003csource\n type=\"image/webp\"\n data-srcset=\"lazy_400.webp 400w, \n lazy_800.webp 800w\"\n data-sizes=\"100w\"\n /\u003e\n \u003cimg\n alt=\"A lazy image\"\n class=\"lazy\"\n data-src=\"lazy.jpg\"\n data-srcset=\"lazy_400.jpg 400w, \n lazy_800.jpg 800w\"\n data-sizes=\"100w\"\n /\u003e\n\u003c/picture\u003e\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy background image\n\nāš  **IMPORTANT NOTE**: To display content images on your pages, always use the `img` tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: \"would my website user like to see those images when printing out the page?\". If the answer is \"yes\", then your images are content images and you should avoid using background images to display them.\n\n#### Single background image:\n\n```html\n\u003cdiv class=\"lazy\" data-bg=\"lazy.jpg\"\u003e\u003c/div\u003e\n```\n\n#### Single background, with HiDPI screen support:\n\n```html\n\u003cdiv class=\"lazy\" data-bg=\"lazy.jpg\" data-bg-hidpi=\"lazy@2x.jpg\"\u003e\u003c/div\u003e\n```\n\n#### Multiple backgrounds:\n\n```html\n\u003cdiv\n class=\"lazy\"\n data-bg-multi=\"url(lazy-head.jpg), \n url(lazy-body.jpg), \n linear-gradient(#fff, #ccc)\"\n\u003e\n ...\n\u003c/div\u003e\n```\n\n#### Multiple backgrounds, HiDPI screen support:\n\n```html\n\u003cdiv\n class=\"lazy\"\n data-bg-multi=\"url(lazy-head.jpg),\n url(lazy-body.jpg),\n linear-gradient(#fff, #ccc)\"\n data-bg-multi-hidpi=\"url(lazy-head@2x.jpg),\n url(lazy-body@2x.jpg),\n linear-gradient(#fff, #ccc)\"\n\u003e\n ...\n\u003c/div\u003e\n```\n\n#### Backgrounds with `image-set`:\n\n```html\n\u003cdiv class=\"lazy\" data-bg-set=\"url('lazy@1x.jpg') 1x, url('lazy@2x.jpg') 2x\"\u003e...\u003c/div\u003e\n```\n\n#### Multiple backgrounds with `image-set`:\n\n```html\n\u003cdiv\n class=\"lazy\"\n data-bg-set=\"\n url('lazy-head@1x.jpg') 1x, url('lazy-head@2x.jpg') 2x | \n url('lazy-body@1x.jpg') 1x, url('lazy-body@2x.jpg') 2x\n \"\n\u003e\n ...\n\u003c/div\u003e\n```\n\n### Lazy animated SVG\n\n```html\n\u003cobject class=\"lazy\" type=\"image/svg+xml\" data-src=\"lazy.svg\"\u003e\u003c/object\u003e\n```\n\n### Lazy video\n\n```html\n\u003cvideo class=\"lazy\" controls width=\"620\" data-src=\"lazy.mp4\" data-poster=\"lazy.jpg\"\u003e\n \u003csource type=\"video/mp4\" data-src=\"lazy.mp4\" /\u003e\n \u003csource type=\"video/ogg\" data-src=\"lazy.ogg\" /\u003e\n \u003csource type=\"video/avi\" data-src=\"lazy.avi\" /\u003e\n\u003c/video\u003e\n```\n\nPlease note that the video poster can be lazily loaded too.\n\n### Lazy iframe\n\n```html\n\u003ciframe class=\"lazy\" data-src=\"lazyFrame.html\"\u003e\u003c/iframe\u003e\n```\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ‘©ā€šŸ’» Getting started - Script\n\nThe latest, recommended version of LazyLoad is **19.1.3**.\nNote that if you need to support Internet Explorer 11, you need to use version 17.9.0 or below.\n\nQuickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).\n\n### The simple, easiest way\n\nThe easiest way to use LazyLoad is to include the script from a CDN.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"\u003e\u003c/script\u003e\n```\n\nOR, if you prefer to import it as an ES module:\n\n```html\n\u003cscript type=\"module\"\u003e\n import LazyLoad from \"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.0.3/+esm\";\n\u003c/script\u003e\n```\n\nThen, in your javascript code:\n\n```js\nvar lazyLoadInstance = new LazyLoad({\n // Your custom settings go here\n});\n```\n\nTo be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `\u003c/body\u003e` tag**.\n\nIf more DOM arrives later, e.g. via an AJAX call, you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.\n\n```js\nlazyLoadInstance.update();\n```\n\n### Using an `async` script\n\nIf you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.\n\nTo do so, **you must define the options before including the script**. You can pass:\n\n- `{}` an object to get a single instance of LazyLoad\n- `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options.\n\n```html\n\u003cscript\u003e\n // Set the options globally\n // to make LazyLoad self-initialize\n window.lazyLoadOptions = {\n // Your custom settings go here\n };\n\u003c/script\u003e\n```\n\nThen include the script.\n\n```html\n\u003cscript\n async\n src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"\n\u003e\u003c/script\u003e\n```\n\n**Possibly place the script tag right before the closing `\u003c/body\u003e` tag**. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call its `update()` method to make it check the DOM again.\n\n### Using an `async` script + getting the instance reference\n\nSame as above, but you must put the `addEventListener` code shown below before including the `async` script.\n\n```html\n\u003cscript\u003e\n // Set the options globally\n // to make LazyLoad self-initialize\n window.lazyLoadOptions = {\n // Your custom settings go here\n };\n // Listen to the initialization event\n // and get the instance of LazyLoad\n window.addEventListener(\n \"LazyLoad::Initialized\",\n function (event) {\n window.lazyLoadInstance = event.detail.instance;\n },\n false\n );\n\u003c/script\u003e\n```\n\nThen include the script.\n\n```html\n\u003cscript\n async\n src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"\n\u003e\u003c/script\u003e\n```\n\nNow you'll be able to call its methods, like:\n\n```js\nlazyLoadInstance.update();\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html) \u0026larr; for a single LazyLoad instance\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html) \u0026larr; for multiple LazyLoad instances\n\n### Local install\n\nIf you prefer to install LazyLoad locally in your project, you can!\n\n#### Using npm\n\n```\nnpm install vanilla-lazyload\n```\n\n#### Using bower\n\n```\nbower install vanilla-lazyload\n```\n\n#### Manual download\n\nDownload one the latest [releases](https://github.com/verlok/vanilla-lazyload/releases/). The files you need are inside the `dist` folder. If you don't know which one to pick, use `lazyload.min.js`, or read [about bundles](#bundles).\n\n### Local usage\n\nShould you install LazyLoad locally, you can import it as ES module like the following:\n\n```js\nimport LazyLoad from \"vanilla-lazyload\";\n```\n\nIt's also possible (but unadvised) to use the `require` commonJS syntax.\n\nMore information about bundling LazyLoad with WebPack are available on [this specific repo](https://github.com/verlok/lazyload-es2015-webpack-test).\n\n### Usage with React\n\nTake a look at this example of [usage of React with LazyLoad](https://codesandbox.io/s/20306yk96p) on Sandbox.\n\nThis implementation takes the same props that you would normally pass to the `img` tag, but it renders a lazy image. Feel free to fork and improve it!\n\n### Bundles\n\nInside the `dist` folder you will find different bundles.\n\n| Filename | Module Type | Advantages |\n| ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `lazyload.min.js` | UMD \u003csmall\u003e(Universal Module Definition)\u003c/small\u003e | Works pretty much everywhere, even in common-js contexts |\n| `lazyload.iife.min.js` | IIFE \u003csmall\u003e(Immediately Invoked Function Expression)\u003c/small\u003e | Works as in-page `\u003cscript src=\"...\"\u003e`, ~0.5kb smaller than UMD version |\n| `esm/lazyload.js` | ES Module | Exports `LazyLoad` so you can import it in your project both using `\u003cscript type=\"module\" src=\"...\"\u003e` and a bundler like WebPack or Rollup |\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ„§ Recipes\n\nThis is the section where you can find _ready to copy \u0026 paste_ code for your convenience.\n\n### Hide alt text and empty image\n\n\u003e šŸ’” **Use case**: when your lazily loaded images show their `alt` text and the empty image icon before loading.\n\nCSS\n\n```css\nimg:not([src]):not([srcset]) {\n visibility: hidden;\n}\n```\n\nJust that, really.\n\n### Image errors handling\n\n\u003e šŸ’” **Use case**: when you want to prevent showing unexisting/broken images on your website.\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad({\n // Other options here...\n callback_error: (img) =\u003e {\n // Use the following line only if your images have the `srcset` attribute\n img.setAttribute(\"srcset\", \"fallback_image@1x.jpg 1x, fallback_image@2x.jpg 2x\");\n img.setAttribute(\"src\", \"fallback_image@1x.jpg\");\n }\n});\n```\n\nNOTE: if the error was generated by a network down (navigator if temporarily offline), vanilla-lazyload will try and load the images again when the network becomes available again.\n\n[EXAMPLE](https://codepen.io/verlok/pen/mdwYbGq) - [API](#-api)\n\n### Dynamic content\n\n\u003e šŸ’” **Use case**: when you want to lazily load images, but the number of images change in the scrolling area changes, maybe because they are added asynchronously.\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad();\n// After your content has changed...\nmyLazyLoad.update();\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/dynamic_content.html) - [API](#-api)\n\n### Mixed native and JS-based lazy loading\n\n\u003e šŸ’” **Use case**: you want to use the `use_native` option to delegate the loading of images, iframes and videos to the browsers engine where supported, but you also want to lazily load background images.\n\nHTML\n\n```html\n\u003cimg class=\"lazy\" alt=\"A lazy image\" data-src=\"lazy.jpg\" /\u003e\n\u003ciframe class=\"lazy\" data-src=\"lazyFrame.html\"\u003e\u003c/iframe\u003e\n\u003cvideo class=\"lazy\" controls data-src=\"lazy.mp4\" data-poster=\"lazy.jpg\"\u003e...\u003c/video\u003e\n\u003cobject class=\"lazy\" type=\"image/svg+xml\" data-src=\"lazy.svg\"\u003e\u003c/object\u003e\n\u003cdiv class=\"lazy\" data-bg=\"lazy.jpg\"\u003e\u003c/div\u003e\n```\n\nJavascript\n\n```js\n// Instance using native lazy loading\nconst lazyContent = new LazyLoad({\n use_native: true // \u003c-- there you go\n});\n\n// Instance without native lazy loading\nconst lazyBackground = new LazyLoad({\n // DON'T PASS use_native: true HERE\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/native_lazyload_conditional.html) - [API](#-api)\n\n### Scrolling panel(s)\n\n\u003e šŸ’” **Use case**: when your scrolling container is not the main browser window, but a scrolling container.\n\nHTML\n\n```html\n\u003cdiv class=\"scrollingPanel\"\u003e\n \u003c!-- Set of images --\u003e\n\u003c/div\u003e\n```\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad({\n container: document.querySelector(\".scrollingPanel\")\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_single.html) - [API](#-api)\n\nIf you have _multiple_ scrolling panels, you can use the following markup and code.\n\nHTML\n\n```html\n\u003cdiv id=\"scrollingPanel1\" class=\"scrollingPanel\"\u003e\n \u003c!-- Set of images --\u003e\n\u003c/div\u003e\n\u003cdiv id=\"scrollingPanel2\" class=\"scrollingPanel\"\u003e\n \u003c!-- Set of images --\u003e\n\u003c/div\u003e\n```\n\nJavascript\n\n```js\nvar myLazyLoad1 = new LazyLoad({\n container: document.getElementById(\"scrollingPanel1\")\n});\nvar myLazyLoad2 = new LazyLoad({\n container: document.getElementById(\"scrollingPanel2\")\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_multiple.html) - [API](#-api)\n\n### Lazy functions\n\n\u003e šŸ’” **Use case**: when you want to execute arbitrary scripts or functions when given elements enter the viewport\n\nHTML\n\n```html\n\u003cdiv class=\"lazy\" data-lazy-function=\"foo\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"lazy\" data-lazy-function=\"bar\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"lazy\" data-lazy-function=\"buzz\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"lazy\" data-lazy-function=\"booya\"\u003e...\u003c/div\u003e\n```\n\nJS\n\n```js\n// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.\nwindow.lazyFunctions = {\n foo: function (element) {\n element.style.color = \"red\";\n console.log(\"foo\");\n },\n bar: function (element) {\n element.remove(element);\n console.log(\"bar\");\n },\n buzz: function (element) {\n var span = document.createElement(\"span\");\n span.innerText = \" - buzz!\";\n element.appendChild(span);\n console.log(\"buzz\");\n },\n booya: function (element) {\n element.classList.add(\"boo\");\n console.log(\"booya\");\n }\n};\n```\n\n```js\nfunction executeLazyFunction(element) {\n var lazyFunctionName = element.getAttribute(\"data-lazy-function\");\n var lazyFunction = window.lazyFunctions[lazyFunctionName];\n if (!lazyFunction) return;\n lazyFunction(element);\n}\n\nvar ll = new LazyLoad({\n unobserve_entered: true, // \u003c- Avoid executing the function multiple times\n callback_enter: executeLazyFunction // Assigning the function defined above\n});\n```\n\nUse `unobserve_entered` to avoid executing the function multiple times.\n\nThat's it. Whenever an element with the `data-lazy-function` attribute enters the viewport, LazyLoad calls the `executeLazyScript` function, which gets the function name from the `data-lazy-function` attribute itself and executes it.\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazy_functions.html) - [API](#-api)\n\n### Lazy initialization of multiple LazyLoad instances\n\n\u003e šŸ’” **Use case**: when you have a lot of horizontally scrolling containers and you want to instantiate a LazyLoad instance on them, but only when they entered the viewport.\n\nHTML\n\n```html\n\u003cdiv class=\"horizContainer\"\u003e\n \u003cimg\n src=\"\"\n alt=\"Row 01, col 01\"\n data-src=\"https://placeholdit.imgix.net/~text?txtsize=19\u0026amp;txt=row_01_col_01\u0026amp;w=200\u0026amp;h=200\"\n /\u003e\n \u003cimg\n src=\"\"\n alt=\"Row 01, col 02\"\n data-src=\"https://placeholdit.imgix.net/~text?txtsize=19\u0026amp;txt=row_01_col_02\u0026amp;w=200\u0026amp;h=200\"\n /\u003e\n \u003c!-- ... --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"horizContainer\"\u003e\n \u003cimg\n src=\"\"\n alt=\"Row 02, col 01\"\n data-src=\"https://placeholdit.imgix.net/~text?txtsize=19\u0026amp;txt=row_02_col_01\u0026amp;w=200\u0026amp;h=200\"\n /\u003e\n \u003cimg\n src=\"\"\n alt=\"Row 02, col 02\"\n data-src=\"https://placeholdit.imgix.net/~text?txtsize=19\u0026amp;txt=row_02_col_02\u0026amp;w=200\u0026amp;h=200\"\n /\u003e\n \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\nJavascript\n\n```js\nvar lazyLoadInstances = [];\n\nvar initOneLazyLoad = function (horizContainerElement) {\n // When the .horizContainer element enters the viewport,\n // instantiate a new LazyLoad on the horizContainerElement\n var oneLL = new LazyLoad({\n container: horizContainerElement\n });\n // Optionally push it in the lazyLoadInstances\n // array to keep track of the instances\n lazyLoadInstances.push(oneLL);\n};\n\n// The \"lazyLazy\" instance of lazyload is used to check\n// when the .horizContainer divs enter the viewport\nvar lazyLazy = new LazyLoad({\n elements_selector: \".horizContainer\",\n callback_enter: initOneLazyLoad,\n unobserve_entered: true // Stop observing .horizContainer(s) after they entered\n});\n```\n\nThat's it. Whenever a `.horizContainer` element enters the viewport, LazyLoad calls the `initOneLazyLoad` function, which creates a new instance of LazyLoad on the `.horizContainer` element.\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api)\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ“ŗ Demos\n\nDidn't find the [recipe](#-recipes) that exactly matches your case? We have demos!\n\nThe [demos](https://github.com/verlok/vanilla-lazyload/tree/master/demos) folder contains 30+ use cases of vanilla-lazyload. You might find there what you're looking for.\n\n| Type | Title | Code | Demo |\n| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------- |\n| Content | Simple lazy loaded images, not using any placeholder | [Code](demos/image_basic.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_basic.html) |\n| Content | Lazy images that use an inline SVG as a placeholder | [Code](demos/image_ph_inline.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_ph_inline.html) |\n| Content | Lazy images that use an external SVG file as a placeholder | [Code](demos/image_ph_external.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_ph_external.html) |\n| Content | Lazy responsive images with `srcset` | [Code](demos/image_srcset.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset.html) |\n| Content | Lazy responsive images with the `\u003cpicture\u003e` tag and the `media` attribute (art direction) | [Code](demos/picture_media.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/picture_media.html) |\n| Content | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`) | [Code](demos/image_srcset_lazy_sizes.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset_lazy_sizes.html) |\n| Content | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`) | [Code](demos/image_srcset_sizes.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset_sizes.html) |\n| Content | Lazy video with multiple `\u003csource\u003e` tags, different preload options, NO autoplay | [Code](demos/video.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/video.html) |\n| Content | Lazy video with multiple `\u003csource\u003e` tags, different preload options, WITH autoplay | [Code](demos/video_autoplay.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/video_autoplay.html) |\n| Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images.html) |\n| Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_multi.html) |\n| Content | Lazy loading background images with `image-set()` | [Code](demos/background_images_image-set.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_image-set.html) |\n| Content | Lazy loading iframes | [Code](demos/iframes.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/iframes.html) |\n| Content | Lazy loading animated SVGs and PDF files | [Code](demos/objects.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/objects.html) |\n| Content | Lazy WebP images with the `\u003cpicture\u003e` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/picture_type_webp.html) |\n| Loading | Asynchronous loading LazyLoad with `\u003cscript async\u003e` | [Code](demos/async.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/async.html) |\n| Loading | Asynchronous loading multiple LazyLoad instances with `\u003cscript async\u003e` | [Code](demos/async_multiple.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) |\n| Error | Test error loading behaviour when `restore_on_error` is `false` | [Code](demos/error_no_restore.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_no_restore.html) |\n| Error | Test error loading behaviour when `restore_on_error` is `true` | [Code](demos/error_restore.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_restore.html) |\n| Technique | Fade in images as they load | [Code](demos/fade_in.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/fade_in.html) |\n| Technique | Lazy load images in CSS-only horizontal sliders (Netflix style) | [Code](demos/sliders_css_only.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/sliders_css_only.html) |\n| Technique | Lazily create Swiper instances and lazily load Swiper images | [Code](demos/swiper.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/swiper.html) |\n| Technique | Lazily execute functions as specific elements enter the viewport | [Code](demos/lazy_functions.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html) |\n| Technique | How to manage the print of a page with lazy images | [Code](demos/print.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/print.html) |\n| Technique | A popup layer containing lazy images in a scrolling container | [Code](demos/popup_layer.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/popup_layer.html) |\n| Settings | Multiple scrolling containers | [Code](demos/container_multiple.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html) |\n| Settings | Single scrolling container | [Code](demos/container_single.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_single.html) |\n| Methods | How to `restore()` DOM to its original state, and/or `destroy()` LazyLoad | [Code](demos/restore_destroy.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/restore_destroy.html) |\n| Methods | Adding dynamic content, then `update()` LazyLoad | [Code](demos/dynamic_content.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content.html) |\n| Methods | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements | [Code](demos/dynamic_content_nodeset.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content_nodeset.html) |\n| Methods | Load punctual images using the `load()` method | [Code](demos/load.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/load.html) |\n| Methods | Load all images at once using `loadAll()` | [Code](demos/load_all.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/load_all.html) |\n| Test | Test for multiple thresholds | [Code](demos/thresholds.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/thresholds.html) |\n| Test | Test behaviour with hidden images | [Code](demos/image_hidden.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_hidden.html) |\n| Test | Test performance, lazy loading of hundreds of images | [Code](demos/hundreds.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/hundreds.html) |\n| Native | Test the native lazy loading of images _WITHOUT_ any line of javascript, not even this script | [Code](demos/native_lazyload.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload.html) |\n| Native | Test the native lazy loading of images _conditionally_ using the `use_native` option (see API) | [Code](demos/native_lazyload_conditional.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) |\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ˜‹ Tips \u0026 tricks\n\n### Minimize [CLS](https://web.dev/cls) by occupy space beforehand\n\nIt's very important to make sure that your lazy images occupy some space even **before they are loaded**, otherwise the `img` elements will be shrinked to zero-height, causing your layout to shift and making lazyload inefficient.\n\nThe best way to do that is to set both `width` and `height` attributes to `img` and `video` elements and, if you choose not to use a placeholder image, apply the `display: block` CSS rule to every image.\n\nYou can find more details and demos in my article [aspect-ratio: A modern way to reserve space for images and async content in responsive design](https://www.andreaverlicchi.eu/blog/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/).\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ”Œ API\n\n### Constructor arguments\n\nThe `new LazyLoad()` instruction you execute on your page can take two parameters:\n\n| Parameter | What to pass | Required | Default value | Type |\n| --------- | ----------------------------------------------- | -------- | ------------- | ------------ |\n| Options | The option object for this instance of LazyLoad | No | `{}` | Plain Object |\n| Nodeset | A NodeSet of elements to execute LazyLoad on | No | `null` | NodeSet |\n\nThe most common usage of LazyLoad constructor is to pass only the options object (see \"options\" in the next section). For example:\n\n```js\nvar aLazyLoad = new LazyLoad({\n /* options here */\n});\n```\n\nIn the unusual cases when you can't select the elements using `elements_selector`, you could pass the elements set as a second parameter. It can be either a NodeSet or an array of DOM elements.\n\n```js\nvar elementsToLazyLoad = getElementSetFromSomewhere();\nvar aLazyLoad = new LazyLoad(\n {\n /* options here */\n },\n elementsToLazyLoad\n);\n```\n\n### Options\n\nFor every instance of _LazyLoad_ you can pass in some options, to alter its default behaviour.\nHere's the list of the options.\n\n| Name | Meaning | Default value | Example value |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ---------------------------------------- |\n| `container` | The scrolling container of the elements in the `elements_selector` option. | `document` | `document.querySelector('.scrollPanel')` |\n| `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `\".lazy\"` | `\".lazyload\"` |\n| `threshold` | A number of pixels representing the outer distance off the scrolling area from which to start loading the elements. | `300` | `0` |\n| `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of IntersectionObserver ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed. | `null` | `\"500px 10%\"` |\n| `data_src` | The name of the data attribute containing the element URL to load, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-src\"`, just pass `\"src\"` | `\"src\"` | `\"lazy-src\"` |\n| `data_srcset` | The name of the data attribute containing the image URL set to load, in either `img` and `source` tags, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-srcset\"`, just pass `\"srcset\"` | `\"srcset\"` | `\"lazy-srcset\"` |\n| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-sizes\"`, just pass `\"sizes\"` | `\"sizes\"` | `\"lazy-sizes\"` |\n| `data_bg` | The name of the data attribute containing the URL of `background-image` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg\"`, just pass `\"bg\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `\"bg\"` | `\"lazy-bg\"` |\n| `data_bg_hidpi` | The name of the data attribute containing the URL of `background-image` to load lazily on HiDPI screens, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-hidpi\"`, just pass `\"bg-hidpi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `\"bg-hidpi\"` | `\"lazy-bg-hidpi\"` |\n| `data_bg_multi` | The name of the data attribute containing the value of multiple `background-image` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-multi\"`, just pass `\"bg-multi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `\"bg-multi\"` | `\"lazy-bg-multi\"` |\n| `data_bg_multi_hidpi` | The name of the data attribute containing the value of multiple `background-image` to load lazily on HiDPI screens, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-multi-hidpi\"`, just pass `\"bg-multi-hidpi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `\"bg-multi-hidpi\"` | `\"lazy-bg-multi-hidpi\"` |\n| `data_bg_set` | The name of the data attribute containing the value of the background to be applied with image-set, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-set\"`, just pass `\"bg-set\"`. The attribute value must be what goes inside the `image-set` CSS function. You can separate values with a pipe (`\\|`) character to have multiple backgrounds. | `\"bg-set\"` | `\"lazy-bg-set\"` |\n| `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-poster\"`, just pass `\"poster\"`. | `\"poster\"` | `\"lazy-poster\"` |\n| `class_applied` | The class applied to the multiple background elements after the multiple background was applied | `\"applied\"` | `\"lazy-applied\"` |\n| `class_loading` | The class applied to the elements while the loading is in progress. | `\"loading\"` | `\"lazy-loading\"` |\n| `class_loaded` | The class applied to the elements when the loading is complete. | `\"loaded\"` | `\"lazy-loaded\"` |\n| `class_error` | The class applied to the elements when the element causes an error. | `\"error\"` | `\"lazy-error\"` |\n| `class_entered` | The class applied to the elements after they entered the viewport. | `\"entered\"` | `\"lazy-entered\"` |\n| `class_exited` | The class applied to the elements after they exited the viewport. This class is removed if an element enters the viewport again. The `unobserve_entered` option can affect the appliance of this class, e.g. when loading images that complete loading before exiting. | `\"exited\"` | `\"lazy-exited\"` |\n| `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s, `object`s nor `video`s. | `true` | `false` |\n| `unobserve_entered` | A boolean that defines whether or not to automatically unobserve elements once they entered the viewport | `false` | `true` |\n| `unobserve_completed` | A boolean that defines whether or not to automatically unobserve elements once they've loaded or throwed an error | `true` | `false` |\n| `callback_enter` | A callback function which is called whenever an element enters the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Entered\", el)}` |\n| `callback_exit` | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Exited\", el)}` |\n| `callback_loading` | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Loading\", el)}` |\n| `callback_cancel` | A callback function which is called whenever an element loading is canceled while loading, as for `cancel_on_exit: true`. | `null` | `(el)=\u003e{console.log(\"Cancelled\", el)}` |\n| `callback_loaded` | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Loaded\", el)}` |\n| `callback_error` | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Error\", el)}` |\n| `callback_applied` | A callback function which is called whenever a multiple background element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=\u003e{console.log(\"Applied\", el)}` |\n| `callback_finish` | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded. Arguments: lazyload instance. | `null` | `()=\u003e{console.log(\"Finish\")}` |\n| `use_native` | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/) to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/). On browsers that support it, LazyLoad will set the `loading=\"lazy\"` attribute on images, iframes and videos, and delegate their loading to the browser. | `false` | `true` |\n| `restore_on_error` | Tells LazyLoad if to restore the original values of `src`, `srcset` and `sizes` when a loading error occurs. | `false` | `true` |\n\n### Methods\n\n**Instance methods**\n\nYou can call the following methods on any instance of LazyLoad.\n\n| Method name | Effect | Use case |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| `update()` | Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`. | Update LazyLoad after you added or removed DOM elements to the page. |\n| `loadAll()` | Loads all the lazy elements right away _and_ stop observing them, no matter if they are inside or outside the viewport, no matter if they are hidden or visible. | To load all the remaining elements in advance |\n| `restoreAll()` | Restores DOM to its original state. Note that it doesn't destroy LazyLoad, so you probably want to use it along with `destroy()`. | Reset the DOM before a soft page navigation (SPA) occures, e.g. using TurboLinks. |\n| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. | Free up some memory. Especially useful for Single Page Applications. |\n\n**Static methods**\n\nYou can call the following static methods on the LazyLoad class itself (e.g. `LazyLoad.load(element, settings)`).\n\n| Method name | Effect | Use case |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `load(element, settings)` | Immediately loads the lazy `element`. You can pass your custom options in the `settings` parameter. Note that the `elements_selector` option has no effect, since you are passing the element as a parameter. Also note that this method has effect only once on a specific `element`. | To load an `element` at mouseover or at any other event different than \"entering the viewport\" |\n| `resetStatus(element)` | Resets the internal status of the given `element`. | To tell LazyLoad to consider this `element` again, for example: if you changed the `data-src` attribute after the previous `data-src` was loaded, call this method, then call `update()` on the LazyLoad instance. |\n\n### Properties\n\nYou can use the following properties on any instance of LazyLoad.\n\n| Property name | Value |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `loadingCount` | The number of elements that are currently downloading from the network (limitedly to the ones managed by the instance of LazyLoad). This is particularly useful to understand whether or not is safe to destroy this instance of LazyLoad. |\n| `toLoadCount` | The number of elements that haven't been lazyloaded yet (limitedly to the ones managed by the instance of LazyLoad) |\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## šŸ˜Æ All features, compared\n\nA list of all vanilla-lazyload features, compared with other popular lazy loading libraries.\n\n### vanilla-lazyload VS lazysizes\n\n| It | vanilla-lazyload | lazysizes |\n| ------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------- |\n| Is lightweight | āœ” (2.8 kB) | āœ” (3.4 kB) |\n| Is extendable | āœ” (API) | āœ” (plugins) |\n| Is SEO friendly | āœ” | āœ” |\n| Optimized for INP (uses `IntersectionObserver` instead of [these]https://gist.github.com/paulirish/5d52fb081b3570c81e3a) | āœ” | |\n| Optimizes performance by cancelling downloads of images that already exited the viewport | āœ” | |\n| Retries loading after network connection went off and on again | āœ” | |\n| Supports conditional usage of native lazyloading | āœ” | |\n| Works with your DOM, your own classes and data-attributes | āœ” | |\n| Can lazyload responsive images | āœ” | āœ” |\n| ...and automatically calculate the value of the `sizes` attribute | | āœ” |\n| Can lazyload iframes | āœ” | āœ” |\n| Can lazyload animated SVGs | āœ” | |\n| Can lazyload videos | āœ” | |\n| Can lazyload background images | āœ” | |\n| Can lazily execute code, when given elements enter the viewport | āœ” | |\n| Can restore DOM to its original state | āœ” | |\n\nWeights source: [bundlephobia](https://bundlephobia.com/). Find others table rows explanation below.\n\n#### Is extendable\n\nBoth scripts are extendable, check out the [API](#-api).\n\n#### Is SEO friendly\n\nBoth scripts **don't hide images/assets from search engines**. No matter what markup pattern you use. Search engines don't scroll/interact with your website. These scripts detects whether or not the user agent is capable to scroll. If not, they reveal all images instantly.\n\n#### Optimizes performance by cancelling downloads of images that already exited the viewport\n\nIf your mobile users are on slow connections and scrolls down fast, vanilla-lazyload cancels the download of images that are still loading but already exited the viewport.\n\n#### Retries loading after network connection went off and on\n\nIf your mobile users are on flaky connections and go offline and back online, vanilla-lazyload retries downloading the images that errored.\n\n#### Supports conditional usage of native lazyloading\n\nIf your users are on a browser supporting native lazyloading and you want to use it, just set the `use_native` option to `true`.\n\n#### Works with your DOM, your own classes and data-attributes\n\nBoth scripts work by default with the `data-src` attribute and the `lazy` class in your DOM, but on LazyLoad you can change it, e.g. using `data-origin` to migrate from other lazy loading script.\n\n#### Can lazyload responsive images\n\nBoth scripts can lazyload images and responsive images by all kinds, e.g. `\u003cimg src=\"...\" srcset=\"...\" sizes=\"...\"\u003e` and `\u003cpicture\u003e\u003csource media=\"...\" srcset=\"\" ...\u003e\u003cimg ...\u003e\u003c/picture\u003e`.\n\n#### ...and automatically calculate the value of the `sizes` attribute\n\nlazysizes is it can derive the value of the `sizes` attribute from your CSS by using Javascript.\nvanilla-lazyload doesn't have this feature because of performance optimization reasons (the `sizes` attribute is useful to eagerly load responsive images when it's expressed in the markup, not when it's set by javascript).\n\n#### Can lazyload iframes\n\nBoth scripts can lazyload the `iframe` tag.\n\n#### Can lazyload animated SVGs\n\nOnly vanilla-lazyload can load animated SVGs via the `object` tag.\n\n#### Can lazyload videos\n\nOnly vanilla-lazyload can lazyload the `video` tag, even with multiple `source`s.\n\n#### Can lazyload background images\n\nOnly vanilla-lazyload can lazyload background images. And also multiple background images. And supporting HiDPI such as Retina and Super Retina display.\n\n#### Can lazily execute code, when given elements enter the viewport\n\nCheck out the [lazy functions](#lazy-functions) section and learn how to execute code only when given elements enter the viewport.\n\n#### Can restore DOM to its original state\n\nUsing the `restoreAll()` method, you can make LazyLoad restore all DOM manipulated from LazyLoad to how it was when the page was loaded the first time.\n\n---\n\n**Love this project? šŸ˜ [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Tested on real browsers\n\nThis script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.\n\n\u003ca href=\"http://browserstack.com/\"\u003e\u003cimg alt=\"BrowserStack Logo\" src=\"./img/browserstack-logo-600x315.png\" width=\"300\" height=\"158\"/\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fverlok%2Fvanilla-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fverlok%2Fvanilla-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fverlok%2Fvanilla-lazyload/lists"}