Free Vanilla JavaScript Polyfill For Native Lazy Loading

loading-attribute-polyfill

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.

Share