Jquery image lazyload plug in jquery.lazyload.js

  • 2020-03-30 03:01:30
  • OfStack

The latest version of jquery. Lazyload. js is no longer a pseudo-lazy load

1. Please follow the instructions for the basic usage Settings


//Load JavaScript file
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>


//None of the four attributes of img tag can be less, otherwise the effect of lazy loading cannot be achieved, as follows:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">


// use 
$(function() {
    $("img.lazy").lazyload();
});

Two, commonly used attribute description


threshold : 200   //Set the sensitivity to indicate that the display area is still 200 pixels away from loading
effect : "fadeIn" //Use fade in effects
failure_limit : 10 //Tolerance range, be sure to set this value, please refer to the original documentation for reasons
container: $("#container") //Use a parent container whose CSS style should contain at least "height: 600px; Overflow: scroll;" Two attributes
event : "click" //Modify the trigger event to click

Three, reference

English reference: http://www.appelsiini.net/projects/lazyload

Chinese reference: http://code.ciaoca.com/jquery/lazyload/


Related articles: