{"id":13397828,"url":"https://github.com/mfranzke/loading-attribute-polyfill","last_synced_at":"2025-05-14T12:12:26.299Z","repository":{"id":34585197,"uuid":"180305087","full_name":"mfranzke/loading-attribute-polyfill","owner":"mfranzke","description":"Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.","archived":false,"fork":false,"pushed_at":"2025-03-03T02:39:31.000Z","size":8168,"stargazers_count":621,"open_issues_count":24,"forks_count":45,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-26T16:49:05.860Z","etag":null,"topics":["html5","javascript","lazy-loading","native-lazy-loading","polyfill","vanilla-js","web-development"],"latest_commit_sha":null,"homepage":"https://mfranzke.github.io/loading-attribute-polyfill/demo/","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/mfranzke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/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":null,"patreon":null,"open_collective":"loading-attribute-polyfill","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-04-09T07:00:25.000Z","updated_at":"2025-04-06T08:13:58.000Z","dependencies_parsed_at":"2023-11-30T18:14:44.139Z","dependency_job_id":"f569a2f4-885c-45f9-ba54-773ec7406888","html_url":"https://github.com/mfranzke/loading-attribute-polyfill","commit_stats":{"total_commits":607,"total_committers":17,"mean_commits":"35.705882352941174","dds":0.6738056013179572,"last_synced_commit":"d6c138971d9777bb774eeac91d134c71161e15eb"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfranzke%2Floading-attribute-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfranzke%2Floading-attribute-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfranzke%2Floading-attribute-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfranzke%2Floading-attribute-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfranzke","download_url":"https://codeload.github.com/mfranzke/loading-attribute-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252307472,"owners_count":21727007,"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":["html5","javascript","lazy-loading","native-lazy-loading","polyfill","vanilla-js","web-development"],"created_at":"2024-07-30T18:01:47.566Z","updated_at":"2025-05-14T12:12:26.275Z","avatar_url":"https://github.com/mfranzke.png","language":"JavaScript","funding_links":["https://opencollective.com/loading-attribute-polyfill","https://opencollective.com/loading-attribute-polyfill/contribute","https://opencollective.com/loading-attribute-polyfill/organization/0/website","https://opencollective.com/loading-attribute-polyfill/organization/1/website","https://opencollective.com/loading-attribute-polyfill/organization/2/website","https://opencollective.com/loading-attribute-polyfill/organization/3/website","https://opencollective.com/loading-attribute-polyfill/organization/4/website","https://opencollective.com/loading-attribute-polyfill/organization/5/website","https://opencollective.com/loading-attribute-polyfill/organization/6/website","https://opencollective.com/loading-attribute-polyfill/organization/7/website","https://opencollective.com/loading-attribute-polyfill/organization/8/website","https://opencollective.com/loading-attribute-polyfill/organization/9/website"],"categories":["JavaScript"],"sub_categories":[],"readme":"# loading=\"lazy\" attribute polyfill\n\n[![Financial Contributors on Open Collective](https://opencollective.com/loading-attribute-polyfill/all/badge.svg?label=financial+contributors)](https://opencollective.com/loading-attribute-polyfill) [![MIT license](https://img.shields.io/npm/l/loading-attribute-polyfill.svg \"license badge\")](https://opensource.org/licenses/mit-license.php)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/loading-attribute-polyfill)](https://bundlephobia.com/result?p=loading-attribute-polyfill)\n[![Total downloads ~ Npmjs](https://img.shields.io/npm/dt/loading-attribute-polyfill.svg \"Count of total downloads – NPM\")](https://npmjs.com/package/loading-attribute-polyfill 'loading=\"lazy\"-attribute polyfill – on NPM')\n[![jsDelivr CDN downloads](https://data.jsdelivr.com/v1/package/npm/loading-attribute-polyfill/badge \"Count of total downloads – jsDelivr\")](https://www.jsdelivr.com/package/npm/loading-attribute-polyfill \"loading-attribute polyfill – on jsDelivr\")\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/4f4cc692565d425c82860d18a11f17d4)](https://www.codacy.com/gh/mfranzke/loading-attribute-polyfill/dashboard)\n[![Known Vulnerabilities](https://snyk.io/test/github/mfranzke/loading-attribute-polyfill/badge.svg?targetFile=package.json)](https://snyk.io/test/github/mfranzke/loading-attribute-polyfill?targetFile=package.json)\n[![CodeQL](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml/badge.svg?branch=main)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml)\n[![GitHub Super-Linter](https://github.com/mfranzke/loading-attribute-polyfill/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/linter.yml)\n[![loading-attribute-polyfill on Npmjs](https://img.shields.io/npm/v/loading-attribute-polyfill.svg?color=rgb%28237%2C%2028%2C%2036%29 \"npm version\")](https://npmjs.com/package/loading-attribute-polyfill 'loading=\"lazy\"-attribute polyfill – on NPM')\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![Join the chat at https://gitter.im/loading-attribute-polyfill/community](https://badges.gitter.im/loading-attribute-polyfill/community.svg)](https://gitter.im/loading-attribute-polyfill/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE-OF-CONDUCT.md)\n\nFast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements right before they enter the viewport. Provides graceful degradation, and is - not just thatfor - SEO friendly. Handles images with `srcset` and within `picture`, as well as `iframe` elements. `loading=\"lazy\"` will be a huge improvement for todays web performance challenges, so use and polyfill it today!\n\n- Released under the MIT license\n- Made in Germany. And supported by so many great people from all over this planet - see \"Credits\" accordingly.\n- Compatible down to Microsoft Internet Explorer 9\n\n## Features\n\n- Lightweight (see the badge above)\n- Web standards: supports the standard `loading=\"lazy\"` attribute on `img` and `iframe` elements\n- Performance: it's based on highly efficient, best practice code.\n- SEO \u0026 crawlers: the image and iframe contents aren't being hidden from crawlers that aren't capable of scrolling.\n- Supporting HTML generating JavaScript frameworks through a method provided to reinit its functionality (see \"Another solution, especially in combination with JavaScript framework usage\" as well)\n\n## Core concepts\n\nThe polyfill was designed with the following concepts kept in mind:\n\n- dependency-free\n- using JavaScript with graceful degradation\n\n## Another solution, especially in combination with JavaScript framework usage\n\nWe're even also providing [another solution](https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker), which main architectural decision is that we're using Service Worker to intercept the image and iframe contents network requests there. This comes with some aspects that are important to mention, that might be either acceptable (have a look at the [other solution](https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker)) or not (stay with this one) on your requirements and technical context.\n\n- Service Workers only run over **HTTPS**, for security reasons\n- Service Worker need to get **registered on first page visit**\n- Only works on **same domain** network requests\n\nWhereas the first topic might not be a problem (anymore) on most websites – as this should be the de-facto standard nowadays – the second and third might be acceptable in your context, as this polyfill behaves as a progressive enhancement to provide the expected functionality even for non-supporting browsers both only on seconds pages request and any revisits and for same origin image and contents (iframe) requests even only.\n\n## Installation\n\nFirst you'll need to integrate the JavaScript file into your code.\n\nYou may optionally load via NPM or Bower:\n\n    $ npm install loading-attribute-polyfill\n    $ bower install loading-attribute-polyfill\n\nYou could load the polyfill asynchronously as well: \u003chttps://output.jsbin.com/codelib/1\u003e\n\n## Integration\n\nInclude one of the provided JavaScript files depending on your setup plus the CSS file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/loading-attribute-polyfill.css\" /\u003e\n\u003cscript src=\"dist/loading-attribute-polyfill.umd.js\" async\u003e\u003c/script\u003e\n```\n\nor e.g. within JS\n\n```js\nimport loadingAttributePolyfill from \"node_modules/loading-attribute-polyfill/dist/loading-attribute-polyfill.module.js\";\n```\n\nAfterwards, you need to wrap all of your `\u003cimg\u003e` and `\u003ciframe\u003e` HTML tags (in the case of `\u003cpicture\u003e` use the complementary `\u003csource\u003e` HTML tags) that you'd like to lazy load with a `\u003cnoscript\u003e` HTML tag (with the attribute `class=\"loading-lazy\"`.)\n\nPlease keep in mind that it's important to even also include `width` and `height` attributes on `\u003cimg\u003e` HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles \u003chttps://css-tricks.com/do-this-to-improve-image-loading-on-your-website/\u003e (with video) or \u003chttps://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/\u003e\n\nAnd please \"Avoid lazy-loading images that are in the first visible viewport\", compare to [the article \"Browser-level image lazy-loading for the web\"](https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport) published on web.dev:\n\n\u003e You should avoid setting `loading=lazy` for any images that are in the first visible viewport. It is recommended to only add `loading=lazy` to images which are positioned below the fold, if possible.\n\n### Simple image\n\n```html\n\u003cnoscript class=\"loading-lazy\"\u003e\n\t\u003cimg src=\"simpleimage.jpg\" loading=\"lazy\" alt=\"..\" width=\"250\" height=\"150\" /\u003e\n\u003c/noscript\u003e\n```\n\n### Image wrapped in a picture tag\n\n```html\n\u003cnoscript class=\"loading-lazy\"\u003e\n\t\u003cpicture\u003e\n\t\t\u003csource\n\t\t\tmedia=\"(min-width: 40em)\"\n\t\t\tsrcset=\"simpleimage.huge.jpg 1x, simpleimage.huge.2x.jpg 2x\"\n\t\t/\u003e\n\t\t\u003csource srcset=\"simpleimage.jpg 1x, simpleimage.2x.jpg 2x\" /\u003e\n\t\t\u003cimg\n\t\t\tsrc=\"simpleimage.jpg\"\n\t\t\tloading=\"lazy\"\n\t\t\talt=\"..\"\n\t\t\twidth=\"250\"\n\t\t\theight=\"150\"\n\t\t/\u003e\n\t\u003c/picture\u003e\n\u003c/noscript\u003e\n```\n\n### Image with `srcset`\n\n```html\n\u003cnoscript class=\"loading-lazy\"\u003e\n\t\u003cimg\n\t\tsrc=\"simpleimage.jpg\"\n\t\tsrcset=\"\n\t\t\tsimpleimage.1024.jpg 1024w,\n\t\t\tsimpleimage.640.jpg   640w,\n\t\t\tsimpleimage.320.jpg   320w\n\t\t\"\n\t\tsizes=\"(min-width: 36em) 33.3vw, 100vw\"\n\t\talt=\"A rad wolf\"\n\t\tloading=\"lazy\"\n\t/\u003e\n\u003c/noscript\u003e\n```\n\n### Iframe\n\n```html\n\u003cnoscript class=\"loading-lazy\"\u003e\n\t\u003ciframe\n\t\tsrc=\"https://player.vimeo.com/video/87110435\"\n\t\twidth=\"320\"\n\t\theight=\"180\"\n\t\tloading=\"lazy\"\n\t\u003e\u003c/iframe\u003e\n\u003c/noscript\u003e\n```\n\n## Optional additional dependencies\n\nIn case you'd like to support [older versions of Microsoft Edge, Microsoft Internet Explorer 11 or Apple Safari up to 12.0](https://caniuse.com/#feat=intersectionobserver), you could (conditionally) load an IntersectionObserver polyfill:\n\n\u003chttps://www.npmjs.com/package/intersection-observer\u003e\n\nNevertheless this polyfill would still work in those browsers without that other polyfill included, but [this small amount of users](\u003c(https://caniuse.com/#feat=intersectionobserver)\u003e) wouldn't totally benefit from the lazy loading functionality - we've at least got you partly covered by using the [Microsoft proprietary lazy loading resource hints](https://caniuse.com/#feat=lazyload).\n\n### Internet Explorer 9 \u0026 Internet Explorer 10\n\n\u003e Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.\n\nSource: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState\n\nThat for you would need to include the polyfill the latest within the HTML code, like the nearest to the closing `body` HTML tag, as including it e.g. within the `head` section might lead to an unexpected state, so that in worst case the images might not get loaded.\n\n### Internet Explorer 9\n\nThe polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also include a `matchMedia` polyfill.\n\nAnd the images are still displaying an error in the demo on IE9, as most likely (from my understanding) this browser doesn't work with the HTTPS protocol by GitHub pages any more, but the src-attributes values are correctly rewritten after all.\n\n## API\n\nIn case that you're dynamically adding HTML elements within the browser, you could call the following method with an included [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) object, like e.g.:\n\n```JavaScript\nloadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'));\n```\n\n## Demo\n\nSee the polyfill in action either by downloading / forking this repository and have a look at `demo/index.html`, or at the hosted demo: \u003chttps://mfranzke.github.io/loading-attribute-polyfill/demo/\u003e\n\n## Further implementations - Kudos for that\n\n### WordPress\n\nNico23 has developed a WordPress plugin: \u003chttps://wordpress.org/plugins/native-lazyload-polyfill/\u003e (which is much better than the one by Google !)\n\n### PHP Twig Extension\n\n@tim-thaler has developed a PHP Twig Extension: \u003chttps://github.com/tim-thaler/twig-loading-lazy\u003e\n\n### Craft Twig Loading Lazy plugin\n\n@tim-thaler has even also developed a Craft Twig Loading Lazy plugin: \u003chttps://github.com/tim-thaler/craft-twig-loading-lazy\u003e\n\n## Credits\n\nCredits for the initial kickstarter / script to @Sora2455 for better expressing my ideas \u0026 concepts and support by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm, @TomS-, @vinyfc93, @JordanDysart and @denyshutsal. Thank you very much for that, highly appreciated !\n\n## Tested with\n\n- Mac\n\n  - Safari 14, macOS 11 (via CrossBrowserTesting)\n  - Mozilla Firefox _latest_, macOS 10.14 (manually, localhost)\n  \u003c!-- - macOS 10.14, Safari 12 (via CrossBrowserTesting)\n  - macOS 10.13, Safari 11 (via CrossBrowserTesting) --\u003e\n\n- iOS\n\n  - Mobile Safari 12.0, iPad 6th Generation Simulator (manually)\n\n- Windows\n\n  - Google Chrome _latest_, Windows 10 (via CrossBrowserTesting)\n  - Mozilla Firefox _latest_, Windows 10 (via CrossBrowserTesting)\n  - Microsoft Edge version 18, Windows 10 (manually, localhost)\n  - Microsoft Internet Explorer version 11, Windows 10 (via CrossBrowserTesting)\n  - Internet Explorer 9.0.8112.16421, Windows 7 SP1 (manually, localhost)\n\n### Big Thanks\n\nCross-browser testing platform provided by [CrossBrowserTesting](https://crossbrowsertesting.com)\n\n[![CrossBrowserTesting](https://static1.smartbear.co/crossbrowsertesting/media/site/cbt-smartbear-logo.svg \"CrossBrowserTesting\")](https://crossbrowsertesting.com)\n\n## Things to keep in mind\n\n- The HTML demo code is meant to be simple\n- This polyfill doesn't (so far) provide any functionality for the `loading=\"eager\"` value, as this was released even already, but still seems to be in the measure, learn and improvements phase.\n\n## More information on the standard\n\n- [Specification](https://github.com/whatwg/html/pull/3752)\n- [LazyLoad Explainer](https://github.com/scott-little/lazyload)\n\n## Outro\n\nIf you're trying out and using my work, feel free to contact me and give me any feedback. I'm curious about how it's gonna be used.\n\nAnd if you do like this polyfill, please consider even also having a look at the other polyfill we've developed: \u003chttps://github.com/mfranzke/datalist-polyfill/\u003e\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/mfranzke/loading-attribute-polyfill/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/loading-attribute-polyfill/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/loading-attribute-polyfill/contribute)]\n\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/loading-attribute-polyfill/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/loading-attribute-polyfill/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfranzke%2Floading-attribute-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfranzke%2Floading-attribute-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfranzke%2Floading-attribute-polyfill/lists"}