This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
loading-attribute-polyfill with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
srcset and within
picture, as well as
loading="lazy" will be a huge improvement for todays web performance challenges, so use and polyfill it today!
The polyfill was designed with the following concepts kept in mind:
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 in case of
<picture> usage the complementary
<source> HTML tags as well) 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.
Please keep in mind that it's beneficial to even also include
height attributes on
<img> 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 https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/ (with video) or https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/
<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:
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.
Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
That 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.
The polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also include a
And 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 rewritten after all.
Nothing really, just integrate it as shown within the "installation" section, and 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, @TomS- and @vinyfc93. Thank you very much for that, highly appreciated !
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/