Fácil imagen Lazy loading con Blazy. js

Vista prévia

Descripción

Blazy. js es un script ligero & fácil de usar para retrasar la carga de imágenes hasta que entran en la ventanilla. Útil para guardar el ancho de banda y reducir las solicitudes de servidor.

Uso básico

Incluya el Blazy. js al final del documento para que las páginas se carguen más rápido.

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

Agregue una clase CSS â & #128; & #156; b-Lazy â & #128; & #157; a las imágenes de marcador de posición y guarde el origen de la imagen real en el atributo Data-src .

<img class="b-lazy" data-src="loaded-image.jpg" src="placeholder.jpg" />

Inicialización.

var bLazy = new Blazy();

Eso es todo. Estas son algunas opciones disponibles.

var bLazy = new Blazy({
 // Multi-serve images based on screen size. Go to multi-serve image example
breakpoints: false,
// If you want to lazy load images inside a scrolling container change the default value to the selector of the container
container: window,
// Callback for when something goes wrong. There are two error messages, missing and invalid. You’ll get missing if no data-src is defined. Invalid if the data-src is invalid.
error: function(ele, msg),
// The classname an image will get if something goes wrong.
errorClass: 'b-error',
// The offset controls how early you want the images to be loaded before they’re visible. Default is 100, so 100px before an image is visble it’ll start loading.
offset: 100,
// Used if you want to pass retina images: data-src=”image.jpg|[email protected]”.
separator: '|',
// Callback for when an image has loaded.
 success: function(ele),
// The classname an image will get when loaded.
successClass: 'b-loaded,
// Image selector for images that should lazy load. If you want to lazy load all images write ‘img’. You can add multiple selectors separated with comma; ‘.b-lazy, .bLazy, .blazy’
selector: '.b-lazy',
// Attribute where the original image source can be found
src: 'data-src'	
});

Registro de cambios

10/23/2016

• v1.8.1