The lazy loader plug-in based on jquery implements lazy loading of images [simple use]_jquery

Lazy loading of images can be achieved by using jquery's lazy loader plug-in. When the web page is relatively long, only the images in the user window will be loaded first, and the images outside the window will not be loaded until you drag the scroll bar to the back. This is effective. Avoid the disadvantages of slow loading due to too many images.

Using the lazy loader plug-in is very simple. Just introduce the lazy loader plug-in into the page, and then call the lazy loading method for the images on the page. The download address of the lazy loader plug-in: http://www.appelsiini.net/projects/lazyload. Let’s take a look at the specific usage:

Jquery.LazyLoad.js Detailed explanation of plug-in parameters:


1, use a picture to place a placeholder in advance
placeholder: "img/grey.gif",
Parameter: placeholder, the value is a certain picture path. This picture uses to occupy the position of the image to be loaded. When the image is loaded, the placeholder image will be hidden

2, what effect to use for loading
effect: "fadeIn",
Parameters: effect( Special effects), the values ​​include show (direct display), fadeIn (fade in), slideDown (pull down), etc. Commonly used fadeIn

3, start loading in advance
threshold: 200,
Parameter: threshold, value is a number, representing the height of the page. If set to 200, it means that the scroll bar will start loading images when it is still 200 from the target position, which can be avoided by the user.

4, when the event is triggered Load
event: "click",
parameter: event, the values ​​are click (click), mouseover (mouse over), sporty (sporty), foobar (...). You can achieve the mouse over or click on the picture Loading has just started, the last two values ​​​​have not been tested...

5, to achieve the effect of images in a certain container
container: $("#container"),
Parameter: container, the value is a certain Container.lazyload takes effect by default when the browser scroll bar is pulled. This parameter allows you to load the images in a DIV sequentially when pulling the scroll bar of a DIV

6, when the image sorting is chaotic
failurelimit: 10,
Parameter: failurelimit, the value is a number. By default, lazyload will not continue loading when it finds the first image that is not in the visible area, but when the HTML container is confused, the image in the visible area may not be loaded. , failurelimit is intended to load N pictures outside the visible area to avoid this problem.