Biblioteca de JavaScript para la carga diferida y multi-porción de imágenes

Vista prévia

Descripción

Una biblioteca de JavaScript pura utilizada para la carga diferida de las imágenes apropiadas dependiendo de la posición de desplazamiento y el tamaño de la pantalla. También proporciona una animación de efecto de fundido cuando la imagen se ha cargado por completo.

Funcionamiento

Sólo tiene que incluir el script del plugin en la sección Head y estamos listos para ir.

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

Inserte su imagen en la página web utilizando el atributo ' Data-src ' como este:

<img data-src="1.jpg" width="400" height="300">

Para múltiples porciones de imágenes:

<img src="1.jpg" data-src-small="[email protected]" data-src-retina2x="[email protected]">

Inicialice el complemento creando un nuevo objeto JSLazyLoadin como este:

var jsLazy = new JSLazyLoading ();

Posibles opciones de plugins.

var jsLazy = new JSLazyLoading ({



// Determines whether to use a built-in docReady function.


docReady: true,



// The name of the data-* attribute that identify the image source.


dataAttribute: "data-src",



// Enable multi-serving of images


multiServing: false,



// Determines the multi-serving type


// 'width' or 'density'


multiServingType: "density",



// The breakpoints of multi-serving


multiServingBreakpoints: {},



// Determines whether to force the loading of images that are outside the viewport


// null or interger


sequentialLoading: null,



// Image placeholder


placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",



// Loading image


loaderImage: b + "/loader.gif",



// Background color


backgroundColor: null,



// Displays images by fading them to opaque


fadeInEffect: true,



// Durationg


fadeInDuration: 400,



// Determines the final image opacity


fadeInPreserveOpacity: ture,



// For legacy browsers


softMode: false,



// Restart the plugin when the browser sends an HTTP request if you need the new images to load in lazy mode


ajaxListener: false,



// The number of images that are checked simultaneously


limit: 0,



// Determines the shape of the viewport


rectangularScope: false,



// Threshold borders


rangeY: 0,


rangeX: 0

});