Vista prévia

Descripción

Interlace. js es una biblioteca de JavaScript ligera que se utiliza para crear un efecto progresivo de carga de imagen con un efecto de desenfoque como se ve en Medium.com. Útil para reducir el tiempo de carga de la página para mejorar las experiencias del usuario.

See also:

• efecto de carga de imagen de estilo medio â & #128; & #147; pilpil

Funcionamiento

Incluya el JavaScript y la hoja de estilo de Interlace en la página HTML.

<link href="interlace.min.css" rel="stylesheet">
<script src="interlace.min.js"></script>

Prepare imágenes de baja calidad para las imágenes originales y, a continuación, insértelos en un elemento DIV mediante atributo de de datos Interlace como se muestra a continuación:

<div data-interlace-src="1.jpg"


 data-interlace-low="1.low.jpg">
</div>

Ejecutar todos los elementos Interlace sin inicializar.

Interlace.scan();

También puede definir las imágenes en el código JavaScript y anexarlas a cualquier elemento contenedor dentro del documento.

var iImg = Interlace.new({


interlaceSrc: "1.jpg",


interlaceLow: "1.low.jpg"
});

document.body.appendChild(iImg);

Opciones disponibles que se pueden pasar un objeto a Interlace. New método:

var iImg = Interlace.new({



// Original image file path.


interlaceSrc: "1.jpg",



// Low-quality image file path.


interlaceLow: "1.low.jpg",



// Toggle visibility of loading icon.


interlaceTip: false,



// Set title attribute to Interlace-element.


interlaceTitle："data-interlace-title",



// Set ALT attribute to Interlace-element.


interlaceAlt: "data-interlace-alt"



});