JQuery image delay loading special effect implementation code

The wind station delays loading pictures in long pages. Pictures outside the viewable area of the browser are not loaded until the user scrolls the page to their location. This is exactly the opposite of how the picture is preloaded. Delaying loading of pictures in long pages that contain many large pictures can speed up page loading. The browser will enter the ready state after the visible picture is loaded. In some cases, it can also help reduce server burdens. Some WordPress themes also have this feature.

Now I'm using this hot news topic because of the thumbnail feature so try to add a look at the effect. Here to apply this feature to the WordPress theme method say, actually very simple, first download jquery.lazyloa.js, put in the topic directory, then add the following code before header.php template file
<script type= "Text/javascript" src= "<?php bloginfo" (' template_directory ');? >/js/jquery.lazyload.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("img"). Lazyload ({
Effect: "FadeIn"
});
});
</script>

One of the IMG is delayed loading all the pictures, can also be based on different templates for corresponding changes, such as my theme, can be changed to #post IMG, so only delay loading #post containers within the picture, otherwise it may affect the side of the picture loading, the main message may be the final loading;

Fadein is the picture display effect

That's the basic thing to do!

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

Valve value 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 the loading of 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 effect parameters

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

Event triggers the load, and the event can be any jQuery time, such as: Click and MouseOver. You can also use custom events, such as: Sporty and foobar. Waits by default until the user scrolls to the location of the picture on the window. To prevent loading pictures before the gray placeholder picture is clicked, you can do this:

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

Delayed loading of the picture Lazy the load plugin with an incomplete function, but this can also be used to implement the delay loading of the picture. The following code implements the page load completion and then loads it. After the page has finished loading for 5 seconds, the picture in the specified range is automatically loaded.

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

The picture is inside the container you can use the plugin on a picture of a scrollable container, 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, scrolling the page, Lazy load loops to the loaded picture. Detects whether a picture is in the viewable area in a loop. By default, the loop stops when you find the first picture that is not in the visible area. Pictures are considered streaming, and the order of the pictures 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
});


Not a piece of jquery. Deferred load implementation code

$ (document). ON ("scroll", Scrollcheck);
$ (document). Off ("scroll", Scrollcheck);
Scroll bar Events
$ (window). Scroll (function () {
$ (this). ScrollTop ()//scroll bar Current height
($ (". Imgdiv"). Offset (). Top contains the height of the picture div to load
$ ("#loadimg"). Innerheight () Load icon height
$ (this). Height () Browser visibility
if ($ (this). ScrollTop () > ($ ('. Imgdiv '). Offset (). Top + $ (' #loadimg '). Innerheight ()-$ (this). Height ()) {
Ajax requests can be placed here ... Bind to label and hide load icon after getting data
$.getjson ("/main/...", {}, function () {

//})

　　　　　　　　　　
Delayed loading with timed simulation (data acquisition and binding should be placed in Ajax)
var i = 3;
var set = SetInterval (function () {
i--;
if (I < 0) {
$ ("#loadimg"). CSS ("display", "none");
$ (". IMGs"). CSS ("Display", "block");
Clearinterval (set);
} else {

}
}, 1000);

}
});






<div style= "height:900px; height:1500px; " >
</div>
<div class= "Imgdiv" >

<div class= "Showimg" >

</div>
</div>
<div style= "height:900px; height:1500px; " >
</div>