Lazy Loading Images using Javascript – yall.js

The yall.js is another great library for lazy loading images. It is a javascript small and tiny library which easy to implement on any kind of website.

it not only supports the photos but also can be implemented on video and as well as on iframe code. The implementation is pretty much easy and cool.

You need to call the main javascript file to start implementing the lazy loading effect. If you have heave rich media content then this plugin perfect for you.

It decreases the page load and increases the above the fold page speed. It is based on the  Intersection Observer API.

How to Add Lazy Loading Photos on your Website

You can easily install it with NPM.

$ npm install yall

Simply add the minified & compiled JavaScript version of  ‘yall-1.1.1.min.js’ on the webpage.

<script src="yall-1.1.1.min.js" defer></script>

To add the Lazy load on images, you simply need to use the data-src and add a class lazily.

<img class="lazy" data-src="test-768w.jpg" src="placeholder.jpg" alt="Lazy loading &lt;img&gt; with src" title="Lazy loading &lt;img&gt; with src">
<noscript>
  <img src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with src" title="&lt;noscript&gt; fallback for &lt;img&gt; with src">
</noscript>

You can also Lazy load images with picture element:

<picture>
  <source data-srcset="test-768w.webp 768w, test-1024w.webp 1024w, test-1280w.webp 1280w, test-1536w.webp 1536w" srcset="placeholder.webp" type="image/webp">
  <source data-srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" srcset="placeholder.jpg" type="image/jpeg">
  <img class="lazy" data-src="test-768w.jpg" src="placeholder.jpg" alt="Lazy loading &lt;img&gt; with src" title="Lazy loading &lt;img&gt; with src">
</picture>
<noscript>
  <picture>
    <source srcset="test-768w.webp 768w, test-1024w.webp 1024w, test-1280w.webp 1280w, test-1536w.webp 1536w" type="image/webp">
    <source srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" type="image/jpeg">
    <img src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with src" title="&lt;noscript&gt; fallback for &lt;img&gt; with src">
  </picture>
</noscript>