Pure JavaScript Native Lazy Loading Polyfill

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