Fast and lightweight vanilla JavaScript polyfill for the native 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 iframes. loading="lazy"
will be a huge improvement for todays web performance challenges, so use and polyfill it today!
- Supports the standard
loading="lazy"
attribute onimage
andiframe
elements - Released under the MIT license
- Made in Germany
TBD
The polyfill was designed with the following concepts kept in mind:
- dependency-free
- Using JavaScript with graceful degradation
Just integrate the JavaScript file into your code - et voilà.
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://jsbin.com/yitarajawe/edit?html,css
Afterwards you'll 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>
<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 lazyloading resource hints.
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/
Credits for the initial kickstarter / script to @Sora2455 for better expressing my ideas & concepts and support by @diogoterremoto, @dracos and @Flimm. Thank you very much for that, highly appreciated !
- Mac
- Mac OSX 10.14, Mozilla Firefox 68.0.1
- Mac OSX 10.14, Safari 12
- Mac OSX 10.13, Safari 11
- iOS
- iPad 6th Generation Simulator, Mobile Safari 12.0
- Windows
- Windows 10, Google Chrome / versions latest & latest-1
- Windows 10, Microsoft EDGE / versions 17, 18
- Windows 10, Microsoft Internet Explorer / version 11
Cross-browser testing platform provided by CrossBrowserTesting
- The demo HTML code is meant to be simple
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.