JavaScript Library For Lazy Loading And Multi-serving Of images

Preview:

Description:

A pure JavaScript library used for lazy loading the proper images depending on the scroll position and screen size. Also provides a fade effect animation when the image has been completely loaded.

How to use it:

Just include  the plugin’s script in the head section and we’re ready to go.

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

Insert your image into the webpage using the ‘data-src’ attribute like this:

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

For multi-serving of images:

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

Initialize the plugin by creating a new JSLazyLoadin object as this:

var jsLazy = new JSLazyLoading ();

Possible plugin options.

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
});