Loading attribute polyfill is fast and lightweight JavaScript filling with vanilla for native slow-loading, which means the behavior of loading objects directly before they enter the viewport. It provides agile degradation and is – not just that – SEO-friendly.
Handles images with srcset and in-image, as well as iframe elements. Loading = “lazy” will be a huge improvement on today’s web performance challenges, so use it and tweak it today!
How to make use of 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 within the doc.
<script src="./loading-attribute-polyfill.min.js"></script>
Wrap the pictures and iframes right into a noscript the factor with the CSS class of 'loading-lazy'.
<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>Pure JavaScript Native Lazy Loading Polyfill, loading=”lazy” attribute polyfill Github
See Demo And Download
Official Website(mfranzke): Click Here
This superior jQuery/javascript plugin is developed by mfranzke. For extra Advanced usage, please go to the official website.
