Author: | mfranzke |
---|---|
Views Total: | 149 views |
Official Page: | Go to website |
Last Update: | March 13, 2023 |
License: | MIT |
Preview:

Description:
A small vanilla JavaScript polyfill for the loading="lazy"
attribute.
What is loading=”lazy” attribute
The loading=”lazy” attribute is introduced in Google Chrome that allows the browser to lazy load images and iframes without any 3rd library.
For those browsers that don’t support the loading="lazy"
attribute, you might need a polyfill to enable the native lazy loading.
You can check out this article for more about lazy loading.
How to use it:
Install & download the polyfill.
# Yarn $ yarn add loading-attribute-polyfill # NPM $ npm install loading-attribute-polyfill --save
Load the loading-attribute-polyfill.min.js script in the document.
<script src="./loading-attribute-polyfill.min.js"></script>
Wrap the images and iframes into a noscript
element with the CSS class of 'loading-lazy'
. That’s it.
<noscript class="loading-lazy"> <img src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22" loading="lazy" alt=".." width="250" height="150" /> </noscript> <picture> <noscript class="loading-lazy"> <source media="(min-width: 40em)" srcset=" https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+1x_br_loading%3D%22lazy%22 1x, https://imgplaceholder.com/500x300/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+2x_br_loading%3D%22lazy%22 2x " /> <source srcset=" https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_1x_br_loading%3D%22lazy%22 1x, https://imgplaceholder.com/500x300/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_2x_br_loading%3D%22lazy%22 2x " /> <img src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_img+src_br_loading%3D%22lazy%22" loading="lazy" alt=".." width="250" height="150" /> </noscript> </picture> <noscript class="loading-lazy"> <img src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22" srcset=" https://imgplaceholder.com/1024x400/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+1024w_br_loading%3D%22lazy%22 1024w, https://imgplaceholder.com/640x400/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+640w_br_loading%3D%22lazy%22 640w, https://imgplaceholder.com/320x320/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+320w_br_loading%3D%22lazy%22 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>
Changelog:
v2.1.1 (03/13/2022)
- Maintenance release
v2.1.0 (05/16/2022)
- added browser field to package.json file instead of the incorrect main entry again
v2.0.2 (04/10/2022)
- v2.0.2
v2.0.0 (05/14/2021)
- v2.0.0
v2.0.0rc.1 (04/06/2021)
- refactor: replacing requestAnimationFrame by will-change: contents (CSS)
- Packgage updated
v2.0.0rc (03/23/2021)
- fix(browsesupport): we need to differentiate in between image and iframe capability
v1.5.4 (02/20/2021)
- Update & bugfix
v1.4.3 (03/28/2020)
- Update & bugfix
v1.4.1 (02/29/2020)
- Update placeholder to SVG to prevent reflow on lazyloaded images
11/30/2019
- v1.3.1