jquery Plugin Lazyload.js The use method of delayed loading pictures _jquery

If a page is very long and has a lot of pictures, download pictures will take a lot of time, it will affect the load speed of the entire page, and this delay loading plug-in, will be through your scrolling situation to load you need to see the picture, and then it will request the download from the background picture, and finally displayed. With this plugin, you can download pictures when you need to display pictures, which can reduce the pressure on the server and increase the speed of the page loading.

Lazy Load Plug-in principle

The SRC attribute of the target IMG element is modified to the Orginal property, thus interrupting the loading of the picture. Detects the scrolling state, then restores the img src attribute in the viewable area of the Web page and then loads the picture, thereby creating a buffer load effect. Code Introduction Method:

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.lazyload.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (
Function ($) {
$ ("img"). Lazyload ({
PLACEHOLDER: "Images/grey.gif",//placeholder picture before loading picture
Effect: "FadeIn"//loading the effect of the picture (fade in)
});
});
</script>

But now, many JavaScript Daniel has analyzed that this plugin does not actually play a slow load. Indeed, the authorities have given explanations and solutions.

The reason is that in the new browser, even if we delete the JavaScript-controlled src attribute, the browser will still be loading the image.

So how do we solve it? In fact, it is also very simple, the need to directly modify the HTML structure, the IMG tag to add new attributes, the SRC attribute to the value of the placeholder picture, add the Data-original property to point to the real image address. Like what:

Copy Code code as follows:

Of course, in the above code we put all the pictures in the page behind the load, but sometimes we do not want to, because some pictures do not want to let them delay loading, then we can do this only:

If only the image under load class main is buffered

Copy Code code as follows:

$ (". Main img"). Lazyload ({
PLACEHOLDER: "Images/grey.gif",
Effect: "FadeIn"
});

Load an image with the lazy class mounted:

Copy Code code as follows:

$ ("Img.lazy"). Lazyload ({
PLACEHOLDER: "Images/grey.gif",
Effect: "FadeIn"
});

Other, and so on, appropriate to do the selector adjustment on the line.

Lazyload.js Advanced Use Method:

The following sections come from the official documentation, which is a simple translation of the official document.

A more holistic approach.

We have to think about such a problem. We have defined such a structure, then the source image is not loaded in the Web page. This source image is displayed only when Javascript is executing. If the user's browser does not support or the user turns off the option to support Javascript, then our image cannot be displayed. In other words, without the support of Javascript, our images cannot be displayed.

To deal with this problem, we need to introduce noscript tags. The general idea is as follows: Use NoScript to contain the real image position, when the browser does not support Javascript, directly display the image.

Copy Code code as follows:

<noscript></noscript>"

For existing images, hide the processing and use the show () method to trigger the display.

Copy Code code as follows:

. Lazy {
Display:none;
}

In this way, if the browser does not support Javascript, our custom img will not appear and display the image inside the noscript. The specific implementation code is as follows:

Copy Code code as follows:

$ ("Img.lazy"). Show (). Lazyload ();

Load ahead

The default is that when you scroll to the picture position, the plugin starts to load. In this way, the user may first see a blank image and then appear slowly. If you want to load this image ahead of the user scrolling, you can configure the parameters.

Copy Code code as follows:

$ ("Img.lazy"). Lazyload ({
threshold:200
});

Threshold This parameter, which is used to load ahead of time. The above statement means that when the picture is 200 pixels away, it starts loading the picture.

Custom Trigger Events

The default trigger event, which is scrolling, is checked and loaded when you scroll. You can use the event property to set your own loading events, and then you can customize the conditions that trigger the event and then load the image.

Copy Code code as follows:

$ ("Img.lazy"). Lazyload ({
Event: "Click"
});

customizing display effects

The default picture implementation effect, that is, no effect, download complete, directly displayed. This user experience is not good, you can set the effect property to control the effect of the display picture. For example

Copy Code code as follows:

$ ("Img.lazy"). Lazyload ({
Effect: "FadeIn"
});

The effect of Fadein is to change the transparency of the picture and the way it appears.

To insert an image into a container

If you use smart phones, you often go to the application site to download applications, they usually use a horizontal container, put some phone screenshots. With the Container property, buffering loads can be easily implemented in the container. First, we need to define the container with CSS and then load it with this plugin.

Copy Code code as follows:

#container {height:600px; overflow:scroll;}
$ ("Img.lazy"). Lazyload ({
Container: $ ("#container")
});

Load an invisible image

Some of the images are invisible, and we add them like display:none; By default, this plugin is not loaded with hidden invisible images. If we need to use it to load an invisible image, we need to set the skip_invisible to False, as follows:

Copy Code code as follows:

$ ("Img.lazy"). Lazyload ({
Skip_invisible:false
});

OK, this is the simple introduction of the Lazyload.js plug-in.