Detailed description of image delay loading using jquery plug-in

We recommend that you useJquery image delay loading plug-in jquery. lazyload achieve image delay loading improve website opening speed: http://www.appelsiini.net/download/jquery.lazyload.js

I. Quick Start
1. Import JS plug-ins
Copy codeThe Code is as follows:
<Script src = "js \ jquery. js" type = "text/javascript"> </script>
<Script src = "js \ jquery. lazyload. js" type = "text/javascript"> </script>

2. Add the following javascript to your page:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ ("Img"). lazyload ();
</Script>

This will delay loading of all images;
Ii. Detailed introduction in the advanced article (skip this article if you do not want to know so much)
Lazy Load is a jQuery plug-in written in JavaScript. it delays loading images on 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 images can speed up page loading. The browser will be ready after the visible images are loaded. In some cases, it can help reduce the server load.
Lazy Load is inspired by the YUI ImageLoader toolbox created by Matt Mlinac.
How to use it?
Lazy Load depends on jQuery. Add the following code to the head area of the page:
Copy codeThe Code is as follows:
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. lazyload. js" type = "text/javascript"> </script>

Add the following statement to your Execution Code:
Copy codeThe Code is as follows:
$ ("# Xd"). lazyload ();

This will delay the image loading in the id = "xd" area.
Set Sensitivity
The plug-in provides the threshold option. You can set the critical value (the distance from the image to which the image is loaded) to control the image loading. The default value is 0 (when the image boundary is reached ).
View sourceprint? $ ("# Xd"). lazyload ({threshold: 200 });
Set the critical value to 200. When the visible area is 200 pixels away from the image, the image is loaded. (the literal meaning of this sentence is different from my understanding. The original text is: Setting threshold to 200 causes image to load 200 pixels before it is visible .)
Placeholder Image
You can also set a placeholder image and define an event to trigger the loading action. in this case, you need to set a URL for the placeholder image. transparent, gray, and white 1x1 pixels images are included in the plug-in.
Copy codeThe Code is as follows: $ ("img"). lazyload ({placeholder: "img/grey.gif "});
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 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:
Copy codeThe Code is as follows:
$ ("Img"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "click"
});

Use special effects
When the image is fully loaded, the ins use the show () method by default to display the image. in fact, you can use any special effects you want to use. the following code uses the FadeIn effect. this is the demo page.
Copy codeThe Code is as follows:
$ ("Img"). lazyload ({
Placeholder: "img/grey.gif ",
Effect: "fadeIn"
});

Picture in 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. this is a horizontal and vertical scrolling demo page.
CSS code:
# Container {height: 600px; overflow: scroll ;}
JavaScript code:
Copy codeThe Code is as follows:
$ ("Img"). lazyload ({
Placeholder: "img/grey.gif ",
Container: $ ("# container ")
});

When images are not arranged in sequence
When you scroll through a page, Lazy Load cyclically loads 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.
Copy codeThe Code is as follows:
$ ("Img"). lazyload ({
Failurelimit: 10
});

Set failurelimit to 10 so that the plug-in can find 10 images that are not in the visible area to stop searching. If you have a complicated layout, set this parameter a little higher.
Delayed image loading
Lazy Load is an incomplete function of the plug-in, but it can also be used for delayed 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. this is the demo page for delayed loading.
Copy codeThe Code is as follows:
$ (Function (){
$ ("Img: below-the-fold"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "sporty"
});
});
$ (Window). bind ("load", function (){
Var timeout = setTimeout (function () {$ ("img"). trigger ("sporty")}, 5000 );
});