⭐ Biblioteca de carga diferida de imágenes Performant-Turtle. js ✅ TodoCodigo.net

Vista prévia

Turtle. js es un ligero, de alto rendimiento imagen perezosa biblioteca de carga que utiliza intersección Observer API para detectar si las imágenes están visibles en la ventanilla.

Instale e importe el Turtle. js.

# Yarn
$ yarn add turtle-js

# NPM
$ npm install turtle-js --save

// ES 6
import turtle from 'turtle-js';

// CommonJS:
const turtle = require('turtle-js');

O descargue el zip y luego incluya el archivo JavaScript ' Turtle. min. js ' en el documento.

<script src="js/turtle.min.js"></script>

Inserte el elemento de marcador de posición y especifique la ruta de la imagen que se cargará cuando se visualice.

<img src="placeholder.png"



data-src="image-to-load.jpg"



class="turtle">

Inicializar la biblioteca y listo.

turtle();

Opciones de configuración predeterminadas.

turtle({

// If the image gets within 50px of the Y axis, start the download

rootMargin: '50px',

threshold: 0
});