Through the use of jquery lazy loader plug-ins can be implemented to delay the loading of the picture, when the page is longer, will only load the user window of the picture, depending on the window of the picture will wait until you drag the scroll bar to the back before loading, so effective to avoid too many pictures and slow loading.
Using the Lazy loader plug-in is simple, just introduce the lazy loader plug-in into the page, and then invoke the deferred load method for the picture on the page. Lazy Loader plugin Download address: http://www.appelsiini.net/projects/lazyload. Let's take a look at the specific use of the following:
Copy Code code 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>
Jquery.LazyLoad.js Plug-in parameter detailed:
1, occupy the position with the picture ahead of time
PLACEHOLDER: "Img/grey.gif",
Parameter: Placeholder, the value is a picture path. This picture is used to occupy the position of the picture that will be loaded, while the bitmap is hidden when the picture is loaded
2, what effect does the load use
Effect: "FadeIn",
Parameters: effect (special effects), the value has show (direct display), FadeIn (Fade), Slidedown (Drop-down), commonly used FadeIn
3, start loading early
THRESHOLD:200,
Parameters: Threshold, the value is a number, which represents the height of the page. If set to 200, the scroll bar starts loading pictures at a height of 200 from the target and can be done without the user noticing.
4, the event is triggered before loading
Event: "Click",
Parameters: Event, value has click (click), mouseover (mouse across), sporty (movement), Foobar (...). You can implement the mouse mo or click the picture to start loading, the latter two values have not been tested ...
5, the image of a container to achieve the effect
Container: $ ("#container"),
Parameter: container, the value is a container. Lazyload defaults to pull the browser scroll bar, this parameter allows you to pull a div scroll bar in order to load the picture
6, when the picture sort is confused
Failurelimit:10,
Parameters: Failurelimit, the value is a number. Lazyload defaults to not continue loading when it finds the first picture that is not in the visible area, but when the HTML container is messed up, the picture in the visible area may not be loaded. Failurelimit is intended to load pictures outside the N-visible area to avoid this problem.
