jQuery Lazy Loading Plugin jQuery.lazyload
Usage
Include jquery and jquery.lazyload.js in your page
1 2 | <script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script> |
HTML image usage
Add the lazy style to the image and use data-original to specify the image path
1 2 3 4 5 6 | <img class="lazy" data-original="img/bmw_m1_hood.jpg"><img class="lazy" data-original="img/bmw_m1_side.jpg"><img class="lazy" data-original="img/viper_1.jpg"><img class="lazy" data-original="img/viper_corner.jpg"><img class="lazy" data-original="img/bmw_m3_gt.jpg"><img class="lazy" data-original="img/corvette_pitstop.jpg"> |
Initialize lazyload in JS and set the image display effect
1 2 3 4 5 | <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });</script> |
You can also initialize images without using class="lazy" by using:
1 | $("img").lazyload({effect: "fadeIn"}); |
This will apply to all images globally!
======= The following code is provided by Ling Huan Mu Yu Provided=========
To load images earlier, you can use threshold to configure the loading distance,
1 | $("img.lazy").lazyload({ threshold :180}); |
The above example means that images will be loaded in advance when they are 180px away from the screen:
======== The following content is provided by ?D*memory Provided===============
Import
1 2 | <script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script> |
Determine the path according to the actual directory.
1 2 3 4 5 | <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });</script> |
Using lazyload to reference images
1 | <img class="lazy" data-original="img/bmw_m1_hood.jpg" /> |
Parameter Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("img.lazy").lazyload({ placeholder : "img/grey.gif", // Use an image as a placeholder in advance // placeholder: The value is an image path. This image occupies the position of the image to be loaded and will be hidden once the actual image has loaded effect: "fadeIn", // Specify the loading effect // effect: Available values include show (display immediately), fadeIn (fade in), slideDown (slide down), etc. fadeIn is commonly used threshold: 200, // Start loading in advance // threshold: A numeric value representing the page height. For example, setting it to 200 means images start loading when the scrollbar is still 200 pixels away from the target position, making the loading imperceptible to users event: 'click', // Load only when an event is triggered // event: Values include click, mouseover, sporty, foobar (...). You can make images start loading only when the mouse hovers over or clicks them. The last two values have not been tested... container: $("#container"), // Apply the effect to images within a specified container // container: Specifies a container. lazyload works by default when scrolling the browser scrollbar. This parameter allows images within a specific DIV to load sequentially when scrolling that DIV. failurelimit : 10 // When image loading order is incorrect // failurelimit: Numeric value. By default, lazyload stops loading when it finds the first image outside the visible area. However, when the HTML container is disorganized, some images within the visible area may not load. failurelimit is intended to load N images outside the visible area to prevent this problem.}); |