Lazyload.js detailed

Brief introduction

Lazyload.js is used for lazy loading of long page images, and the viewport image is loaded when the window scrolls to its position, as opposed to preloading.

Advantages:

• It can improve the speed of page loading;
• In some cases it is clear that it can also help reduce server load.

Installation

Bower Installation:

bower install jquery.lazyload

NPM Installation:

npm install jquery-lazyload  

Use

Lazyload relies on jquery. So first introduce jquery and Lazyload

<script src="jquery.js"></script><script src="jquery.lazyload.js"></script>

1. Write the picture path to the Data-original property
2. Add a class named lazy to the image of Lazyload
3. Select all pictures to be lazyload (Img.lazy), execute lazyload ();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200"><script> $(function(){ $("img.lazy").lazyload(); })</script>

Note: You must set the height or width of the picture, or the plugin may not work correctly

Pre-load--threshold

Lazyload default is when scrolling to the picture position, the picture is loaded. However, it can be loaded by setting the threshold parameter to roll to its xx px distance.

    $(function(){        $("img.lazy").lazyload({            threshold :20 }); })

The above example is set to scroll to the distance picture 20px, the picture begins to start loading again

Event triggering (either a jquery event or a custom event)--event

The picture starts to load when the defined event is triggered

    $(function(){        $("img.lazy").lazyload({            event : "click" }); })

The above example makes the image click before it starts to load

TIP: You can use this to implement lazy loading of pictures

$(function() {    $("img.lazy").lazyload({        event : "sporty" });});$(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);});

The above code starts loading the picture five seconds after the page has finished loading

Set Effect--effects

The plugin default loading effect is show() that you can use any effect you want. The following code uses thefadeIn()

$("img.lazy").lazyload({    effect : "fadeIn"});

Scroll the picture inside the container--container

Plug-ins can also be used on images within a scrolling container. The following Div has scrollerbar, content scrolls to the picture position when the picture starts to load

<Divstyle="Height:600px;overflow:scroll"Id="Container" ><img class= "Lazy" data-original= "img/example.jpg" alt= "style=  "margin-top:1000px" height= "200" ></div>< script> $ ( function ( "Img.lazy"). Lazyload ({container: $ (</SCRIPT>         

Pictures that are not arranged in order

• The plugin performs a search for an image that is not loaded, and the loop checks to see if the picture is visible, and by default, the loop stops when a picture outside the first view is found.
• However, there is a situation where the order of the page layout pictures is inconsistent with the order of the HTML image code, which causes the load to be loaded. In this case, you can set Failurelimit to 10, which allows the plugin to find 10 images that are not in the visible area before stopping the search. If you have a disgusting layout, please set this parameter up a bit higher.

Code:

$("img.lazy").lazyload({    failure_limit : 10});

Working with hidden images--skip_invisible

To improve performance, the plugin ignores hidden images by default, or if you want to load hidden pictures. set Skip_invisible to false;

Note: The WebKit browser will automatically treat images without width and height as invisible

$("img.lazy").lazyload({    skip_invisible : true});

转载自https://www.cnblogs.com/yzg1/p/5051554.html

Lazyload.js detailed