Jquery.lazyload detailed

<src= "jquery.js"  type=text/javascript></ SCRIPT > <  src= "jquery.lazyload.min.js"  type=text/javascript  ></SCRIPT>

1 2     $ (function3         $ ("img"4         5        6 7      

Which IMG is delayed loading all the pictures, can also be based on different templates for the corresponding changes, such as my theme, can be changed to #post IMG, so that only delay loading the picture inside the #post container, otherwise it may affect the loading of the side picture, the main message may be the last load;

Fadein is the image display effect

That's basically it!

If the above features may not meet your requirements, there are several options to set.

Thresholds can be set to control sensitivity

$ ("img"). Lazyload ({threshold:200});

Setting the threshold to 200 means load 200 pixels before the picture is seen. Of course, you can also trigger load picture events by setting placeholder pictures and custom events

$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Click"
});

You can also define some picture display effects by defining the effect parameter.

$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Effect: "FadeIn"
});

Event trigger loading, events can be any jQuery time, such as: Click and MouseOver. You can also use custom events, such as: Sporty and foobar. By default, the wait state is reached until the user scrolls to the location of the window slice. Block images from loading before the gray placeholder picture is clicked, you can do this:

$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Click"
});

Lazy loading of a picture, an incomplete feature of the lazily load plugin, but this can also be used to implement a lazy loading of the picture. The following code implements the loading of the page after it has finished loading. After the page loads for 5 seconds, the pictures in the specified area are loaded automatically.

$ (function () {
$ ("Img:below-the-fold"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Sporty"
});
});
$ (window). Bind ("Load", function () {
var timeout = setTimeout (function () {$ ("img"). Trigger ("sporty")}, 5000);
});

Picture in the container you can use the plugin on a scrollable container's picture, such as a DIV element with a scroll bar. All you have to do is define the container as a JQuery object and upload it as a parameter to the initialization method.

Css

#container {
height:600px;
Overflow:scroll;
}

JavaScript Code:

$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Container: $ ("#container")
});

When the picture is not in order, the Lazy load loops through the page as the loaded picture. 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"). Lazyload ({
Failurelimit:10
});

Jquery.lazyload detailed