Jquery-based lazy loader plug-in for delayed image loading [simple use]

You can use the lazy loader plug-in of jquery to implement delayed image loading. When the webpage is relatively long, only images in the user window will be loaded first, the image outside the window will not be loaded until you drag the scroll bar to the back, which effectively avoids the disadvantages of Loading slowly due to too many images.

It is easy to use the lazy loader plug-in. You only need to introduce the lazy loader plug-in on the page, and then call the delayed Loading Method for the images on the page. Lazy loader plug-in: http://www.appelsiini.net/projects/lazyload. Next, let's take a look at the specific usage:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "jquery. lazyload. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (
Function (){
$ ("Img"). lazyload ({
Placeholder: "images/grey.gif ",
Effect: "fadeIn"
});
});
</Script>

Parameters of Jquery. LazyLoad. js plug-in are described as follows:


1. Place a placeholder in advance with an image
Placeholder: "img/grey.gif ",
Parameter: placeholder. The value is the path of an image. This image is used to occupy the position of the image to be loaded. When the image is loaded, the occupied bitmap is hidden.

2. Loading Effect
Effect: "fadeIn ",
Parameters: effect (special effect). values include show (direct display), fadeIn (fade in), and slideDown (drop-down). fadeIn is commonly used.

3. Start loading in advance.
Threshold: 200,
Parameter: threshold. The value is a number, indicating the page height. If it is set to 200, it indicates that the image is loaded when the scroll bar is still 200 from the target location, so that users are not aware of the image.

4. Events are loaded only when they are triggered.
Event: "click ",
Parameter: event. values include click, mouseover, sporty, and foobar (...). You can click the mouse or the image to start loading. The last two values are not tested...

5. Implement effects on images in a container
Container: $ ("# container "),
Parameter: container. The value is a container. lazyload, which takes effect when pulling the browser scroll bar by default. This parameter allows you to load images in turn when pulling the scroll bar of a DIV.

6. chaotic image sorting
Failurelimit: 10,
Parameter: failurelimit. The value is a number. lazyload does not load the first image that is not in the visible area by default. However, when the HTML container is messy, the image in the visible area may not be loaded, failurelimit is intended to load N images outside the visible area to avoid this problem.