Pequeña imagen/vídeo/iframe Lazy Loader-Yall. js

Vista prévia

Descripción

Yall. js es una librería JavaScript muy pequeña para cargar imágenes, videos, contenido iframe e imágenes de fondo a medida que los usuarios se desplazan a través de su página web de contenido pesado. Admite srcset atributo y Picture elemento. Basado en el intersección Observer API.

Funcionamiento

Instálelo con NPM.

$ npm install yall

Incluya el & minificado de JavaScript compilado Yall. min. js en la Página Web.

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

Inicializa el Yall. js y estamos listos para irnos.

document.addEventListener("DOMContentLoaded", yall);

Imágenes de carga diferida con atributo src :

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

Imágenes de carga diferida con srcset atributo:

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

Imágenes de carga diferida con elemento Picture:

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

Vídeos de carga diferida.

<video class="lazy" autoplay loop muted playsinline>

<source data-src="1.webm" type="video/webm">

<source data-src="1.mp4" type="video/mp4">
</video>

<!-- Without Autoplay. Shows poster until played -->
<video class="lazy" data-poster="placeholder.jpg" controls preload="none">

<source data-src="1.webm" type="video/webm">

<source data-src="1.mp4" type="video/mp4">
</video>

Contenido de iframe de carga diferida.

<iframe class="lazy" data-src="1.html"></iframe>

Imagen de fondo de carga diferida.

<div class="demo lazy-bg"></div>

.demo.lazy-bg-loaded {

background: url("masthead.jpg");
}

Opciones posibles para personalizar el cargador perezoso.

document.addEventListener("DOMContentLoaded", function() {

yall({



// CSS selectors


lazyClass: "lazy",


lazyBackgroundClass: "lazy-bg",


lazyBackgroundLoaded: "lazy-bg-loaded",



// timeout in milliseconds


idleLoadTimeout: 200,



// threshold in milliseconds


threshold: 200,



// uses MutationObserver to monitor DOM changes


observeChanges: false,



// event handlers


events: {



// The object key is sent as the first argument to `addEventListener`,



// which is the event. The corresponding value can be the callback if you



// don't want to send any options to `addEventListener`.



load: function (event) {




if (!event.target.classList.contains("lazy") && event.target.nodeName == "IMG") {





event.target.classList.add("yall-loaded");




}



},



// If we want to pass options to the third argument in `addEventListener`,



// we can use a nested object syntax like so:



error: {




// Here, the `listener` member is the callback.




listener: function (event) {





if (!event.target.classList.contains("lazy") && event.target.nodeName == "IMG") {






event.target.classList.add("yall-error");





}




},




// The option below is sent as the third argument to `addEventListener`,




// offering more control over how events are bound. If you want to




// specify `useCapture` in lieu of options pass a boolean here instead.




options: {





once: true




}



}


}

});
});

Registro de cambios

04/04/2018

• v3.1.1