Author: | philip-sorokin |
---|---|
Views Total: | 304 views |
Official Page: | Go to website |
Last Update: | November 4, 2016 |
License: | MIT |
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 });