How to use it?
Lazy Load relies on jQuery. Please add the following code to the page Head area:
Copy Code code as follows:
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.lazyload.js" type= "Text/javascript" ></script>
and add the following statement to your code of execution:
Copy Code code as follows:
$ ("http://www.appelsiini.net/projects/lazyload/img"). Lazyload ();
This will cause the pictures under the id= "http://www.appelsiini.net/projects/lazyload/img" area to be deferred.
Setting sensitivity
The plug-in provides the threshold option to control the loading of a picture by setting a threshold value that triggers the distance to the picture at the loading point. The default value is 0 (loaded when the picture boundary is reached).
Copy Code code as follows:
$ ("http://www.appelsiini.net/projects/lazyload/img"). Lazyload ({threshold:200});
Set the critical value to 200, and start loading the picture when the viewable area is 200 pixels from the picture. (the literal meaning of this sentence is inconsistent with my understanding, Original: Setting threshold to the causes image to load pixels before it is visible.)
Placeholder picture
You can also set up a placeholder picture and define events to trigger the load action. Then you need to set a URL address for the placeholder picture. Transparent, gray and white images of 1x1 pixels are already included in the plugin.
Copy Code code 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. 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:
Copy Code code as follows:
$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Click"
});
Use special effects
When the picture is fully loaded, the plugin uses the show () method to display the graph by default. In fact, you can use any special effects you want to deal with. The following code uses the FadeIn effect. This is the demo page.
Copy Code code as follows:
$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Effect: "FadeIn"
});
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. This is the Horizontal scrolling demo page and the Vertical scrolling presentation page.
CSS Code:
Copy Code code as follows:
#container {
height:600px;
Overflow:scroll;
}
JavaScript Code:
Copy Code code as follows:
$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Container: $ ("#container")
});
when pictures are not arranged in order
When 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.
Copy Code code as follows:
$ ("img"). Lazyload ({
Failurelimit:10
});
The Failurelimit is set to 10 so the plugin finds 10 pictures that are not in the visible area before stopping the search. If you have a wretched layout, please set this parameter a little higher.
Lazy Load Picture
An incomplete feature of the Lazy load plug-in, but this can also be used to implement a delayed 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. This is the Lazy Load demo page.
Copy Code code 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);
});
Download Plugin
Latest Version: Source Code, Compressed Code, Packaged Code
Known Issues
Due to the WebKit bug #6656, Lazy Load is not available in Safari and Chrome. It will immediately load you with all the pictures you are willing and unwilling to be loaded.
It seems that jQuery 1.3.x makes the plugin invalid in IE. All pictures will be loaded in the background even if they should not be loaded. The author is working to solve this problem and can only stay in the JQuery 1.2.6 to use the plug-in during this time.
Also, if you use Mint, add the Mint tag to the page header, and if you add the Mint tag to the end of the page, it interferes with the Lazy Load plug-in. This is a fairly rare issue and if someone finds a solution please contact the author.
