JavaScript Library For Lazy Loading And Multi-serving Of images

Category: Image , Javascript , Loading | November 4, 2016
Author: philip-sorokin
Views Total: 1,762
Official Page: Go to website
Last Update: November 4, 2016
License: MIT

Preview:

JavaScript Library For Lazy Loading And Multi-serving Of images

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

});

You Might Be Interested In:


Leave a Reply