Pure JavaScript Native Lazy Loading Polyfill

Category: Javascript | November 30, 2019
Author: mfranzke
Views Total: 222
Official Page: Go to website
Last Update: November 30, 2019
License: MIT

Preview:

Pure JavaScript Native Lazy Loading Polyfill

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:

11/30/2019

  • v1.3.1

You Might Be Interested In:


Leave a Reply