Small Image Lazy Loader – yall.js

Category: Image , Javascript , Loading , Recommended | August 12, 2017
Author: malchata
Views Total: 116
Official Page: Go to website
Last Update: August 12, 2017
License: MIT

Preview:

Small Image Lazy Loader – yall.js

Description:

yall.js is a really small JavaScript library to lazy load images as the users scroll through your content heavy webpage. Supports srcset attribute and picture element. Based on the Intersection Observer API.

How to use it:

Install it with NPM.

$ npm install yall

Include the minified & compiled JavaScript ‘yall-1.1.1.min.js’ on the webpage.

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

Lazy load images with src attribute:

<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>

Lazy load images with srcset attribute:

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

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>