Picture lazy Loading Lazyload.js use method

Lazyload is a jquery plugin written in JavaScript that can delay loading images from long pages, and images outside the viewable area of the browser will not be loaded until the user scrolls them to their location.

Like Bootstrap, Lazyload.js is also dependent on jquery

<script src= "Resources/js/jquery-1.8.3.min.js" ></script><script src= "resources/js/ Jquery.lazyload.min.js "></script>

Unlike the previous picture introduction path, the real picture path is no longer the SRC attribute, but the data-original. The SRC attribute is used to introduce placeholder pictures (of course, a personal preferred placeholder is not written in the IMG tag). At the same time, you must set the width and height of the IMG, add a class for each lazy loaded picture, such as. lazy

The four attributes must also have: class data-original width height

To get all the lazy-class images to load lazily, just a single line of code can

<script src= "Resources/js/jquery-1.8.3.min.js" ></script><script src= "resources/js/ Jquery.lazyload.min.js "></script><script> $ (' Img.lazy '). Lazyload ();</script></body> 

Set a critical point
By default, the picture will appear in the display area to load, if you want to load the picture in advance, you can set the threshold option, such as setting Thredshold to 200, so that the picture in the distance display area 200px in advance loading
$ (' Img.lazy '). Lazyload ({threshold:200,});

Set placeholder
As mentioned earlier, you can use the SRC attribute of the IMG tag to introduce a picture, such as Loading.gif, instead of the image to be loaded in the display area, we can also add the placeholder option to implement
$ (' Img.lazy '). Lazyload ({placeholder: ' resources/images/loading.gif '});

Setting Events to trigger loading
You can use jquery events such as Click,mouseover, or you can use custom events, which are triggered by default until the user scrolls down and the image appears in the display area. For example: loading a picture only when the user clicks it
$ (' Img.lazy '). Lazyload ({event: ' click '});
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/89/5B/wKiom1gQb2bCiPInAADu4vQaVz8328.png "title=" Qq20161026165444.png "alt=" Wkiom1gqb2bcipinaadu4vqavz8328.png "/>

Using effects
By default, the plug-in waits for an image to be fully loaded and then calls the show () method to display the picture, and we can also use some special effects such as: FadeIn
$ (' Img.lazy '). Lazyload ({effect: ' fadeIn '});

Picture inside the container
Available on a container scrollable picture, such as a DIV element with a scrollbar, you need to define the container as a jquery object and upload it as a parameter to the initialization method, such as: vertical scrolling
#container {height:600px; Overflow:scroll;}
$ ("Img.lazy"). Lazyload ({effect: "FadeIn", Container: $ ("#container")});

When pictures are not arranged in order
When scrolling through a page, Lazy load loops over the loaded image. Detects whether the picture is within the viewable area in the loop. By default, the loop stops when you find the first picture that is not in the visible area. Images are considered to be stream-distributed, and the order of the images in the page is the same as in the HTML code. But in some layouts, such assumptions are not tenable. However, you can control the load behavior with the failurelimit option.
$ ("Img.lazy"). Lazyload ({failure_limit:10});
Setting Failurelimit to 10 allows the plugin to find 10 images that are not in the visible area before stopping the search. If you have a wretched layout, set this parameter up a bit higher.

Load Hidden pictures
There may be a lot of hidden images buried on your page. For example, the plugin used in the filter list, you can constantly modify the list of the purpose of the display state. To improve performance, Lazy Load ignores hidden images by default. If you want to load a hidden picture, set skip_invisible to False
$ ("Img.lazy"). Lazyload ({skip_invisible:false});

For a more detailed study page, refer to:
Http://www.w3cways.com/1765.html

Related plugin download link:
Https://github.com/tuupola/jquery_lazyload

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1865965
Picture lazy Loading Lazyload.js use method