loading-attribute-polyfill
Advanced tools
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.
Fast 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!
loading="lazy" attribute on image and iframe elementsThe polyfill was designed with the following concepts kept in mind:
First you'll need to integrate the JavaScript file into your code.
You may optionally load via NPM or Bower:
$ npm install loading-attribute-polyfill
$ bower install loading-attribute-polyfill
You could even load the polyfill asynchronously: https://output.jsbin.com/codelib/1
Afterwards you have need to wrap all of your <img> and <iframe> HTML tags that you'd like to lazy load (and thatfor added a loading="lazy" attribute as well) by an <noscript> HTML tag:
<noscript class="loading-lazy">
<img
src="simpleimage.jpg"
loading="lazy"
alt=".."
width="250"
height="150"
/>
</noscript>
<picture>
<noscript class="loading-lazy">
<source
media="(min-width: 40em)"
srcset="
simpleimage.huge.jpg 1x,
simpleimage.huge.2x.jpg 2x
"
/>
<source
srcset="
simpleimage.jpg 1x,
simpleimage.2x.jpg 2x
"
/>
<img
src="simpleimage.jpg"
loading="lazy"
alt=".."
width="250"
height="150"
/>
</noscript>
</picture>
srcset<noscript class="loading-lazy">
<img
src="simpleimage.jpg"
srcset="
simpleimage.1024.jpg 1024w,
simpleimage.640.jpg 640w,
simpleimage.320.jpg 320w
"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf"
loading="lazy"
/>
</noscript>
<noscript class="loading-lazy">
<iframe
src="https://player.vimeo.com/video/87110435"
width="320"
height="180"
loading="lazy"
></iframe>
</noscript>
In case you'd like to support older versions of Microsoft Edge, Microsoft Internet Explorer 11 or Apple Safari up to 12.0, you could (conditionally) load an IntersectionObserver polyfill:
https://www.npmjs.com/package/intersection-observer
Nevertheless this polyfill would still work in those browsers without that other polyfill included, but this small amount of users 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.
The polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also provide the following polyfills, as it would elsewhere fall back to rewriting the image URLs correctly, but not do the lazy loading thing'ish.
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 any more, but the src-attributes values are correctly rewriten after all.
Nothing really, just plug it in, it will should work out of the box.
See the polyfill in action either by downloading / forking this repo and have a look at demo/index.html, or at the hosted demo: https://mfranzke.github.io/loading-attribute-polyfill/demo/
Nico23 has developed a WordPress plugin: https://wordpress.org/plugins/native-lazyload-polyfill/ (which is much better than the one by Google !)
@tim-thaler has developed a PHP Twig Extension: https://github.com/tim-thaler/twig-loading-lazy
@tim-thaler has even also developed a Craft Twig Loading Lazy plugin: https://github.com/tim-thaler/craft-twig-loading-lazy
Credits for the initial kickstarter / script to @Sora2455 for better expressing my ideas & concepts and support by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm and @TomS-. Thank you very much for that, highly appreciated !
Mac
iOS
Windows
Cross-browser testing platform provided by CrossBrowserTesting
loading="eager" value, as this was released even already, but still seems to be in the measure, learn and improvements phase.If 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.
And if you do like this polyfill, please consider even also having a look at the other polyfill we've developed: https://github.com/mfranzke/datalist-polyfill/
[1.4.1] - 2020-02-26
webdriverio, husky and xo dependencies.npmignore fileFAQs
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.
The npm package loading-attribute-polyfill receives a total of 1,274 weekly downloads. As such, loading-attribute-polyfill popularity was classified as popular.
We found that loading-attribute-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.