Jquery image delayed Loading

When browsing some websites, it is found that images are loaded only when the scroll bar is pulled down. This is a good user experience. This effect is achieved through the jquery plug-in written in Javascript, which can delay loading images in long pages. images outside the visible area of the browser are not loaded until the user scrolls the page to their location. this is the opposite of the image pre-loading method. delayed loading of images on pages containing many large image titles can speed up page loading. the browser is ready after the visible image is loaded. in some cases, it can also help reduce the burden on the server. some WordPress Themes also have this feature.

I am currently using this hot news topic because of the thumbnail function, so I also try to see how it works. Here we will apply this function to the WordPress theme method. It is actually very simple. First download jquery. lazyloa. JS, put it in the topic directory, and then in the header. add the following code before the 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>

Here, IMG delays loading all images, and can also be modified according to different templates. For example, if I use this topic, I can change it to # post IMG, so that only images in the # post container are delayed loading, otherwise, the loading of the side image may be affected, mainly because the message owner's profile picture may be finally loaded;

Fadein is the Image Display Effect

In this way, we can basically!

If the above functions may not meet your requirements, there are several options available for you to set.

Threshold value can be set to control sensitivity
$ ("IMG"). lazyload ({threshold: 200 });

Set the threshold to 200, which means to load 200 pixels before the image is displayed. Of course, you can also set placeholder images and custom events to trigger image loading events.
$ ("IMG"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "click"
});

You can also define some image display effects by defining the effect parameter.
$ ("IMG"). lazyload ({
Placeholder: "img/grey.gif ",
Effect: "fadein"
});

Event-triggered loading. The event can be any jquery time, such as click and Mouseover. you can also use custom events, such as sporty and foobar. by default, the system is waiting until the user rolls to the location of the window. you can disable image loading before the gray placeholder image is clicked:
$ ("IMG"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "click"
});

Lazy load plug-in provides an incomplete function for delaying image loading. the following code implements page loading and then loading. after the page is loaded for 5 seconds, images in the specified area are 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 );
});

In the container, you can use the plug-in on the image of the scroll container, such as the DIV element with a scroll bar. all you need to do is define the container as a jquery object and upload it to the initialization method as a parameter.

CSS
# Container {
Height: 600px;
Overflow: Scroll;
}

JavaScript code:
$ ("IMG"). lazyload ({
Placeholder: "img/grey.gif ",
Container: $ ("# container ")
});

When images are not arranged sequentially and the page is rolled, lazy load cyclically loads the images. check whether the image is in the visible area in a loop. by default, the loop is stopped when the first image is not visible. images are regarded as stream distribution. The order of images on the page is the same as that in HTML code. however, in some la s, such assumptions are not true. however, you can use the failurelimit option to control the loading behavior.
$ ("IMG"). lazyload ({
Failurelimit: 10
});