How to Use the JQuery buffer to load image plug-in lazyload. js

Lazyload. js is a JQuery-based plug-in that can be used to buffer and load images. If a webpage is long and has many images, it takes a lot of time to download the images, which affects the loading speed of the entire webpage, the image you want to view will be loaded based on your scrolling situation, and then it will request to download the image from the background and display it. With this plug-in, you can download images only when you need to display images. This reduces the pressure on the server and increases the page loading speed.

Lazy Load plug-in principle

Modify the src attribute of the target img element to the orginal attribute to interrupt image loading. Check the rolling status, restore the src attribute of img in the visible area of the webpage, and then load the image, thus creating a buffer loading effect. Code introduction method:

1234567891011

<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", // Attach the placeholder image before the image         effect      : "fadeIn" // Load the image effect (fade in)    });    });</script>

But now, many Javascript experts have analyzed that this plug-in does not really play a slow loading role. This is indeed the case. The official team has provided instructions and solutions.

The reason is that in the new browser, even if we delete the src attribute controlled by Javascript, the browser will still load the image.

How can we solve this problem? In fact, it is also very simple. You need to directly modify the HTML structure, add new attributes to the img tag, point the src attribute value to the placeholder image, and add the data-original attribute, point it to the real image address. For example:

1	<img src="img/grey.gif" data-original="img/example.jpg" >

Of course, in the above Code, we delayed loading all the images on the page, but sometimes we do not want this, because some images do not want to delay loading, we can do this simply:

For example, only the image under the main class is buffered.

1234	$(".main img").lazyload({     placeholder : "images/grey.gif",     effect      : "fadeIn"});

Attach images with lazy classes:

1234	$("img.lazy").lazyload({     placeholder : "images/grey.gif",     effect      : "fadeIn"});

Similarly, you can adjust the selector as appropriate.

Lazyload. js advanced usage:

The following is a simple translation of the official documents from the official documents.

More comprehensive practices

We have to think about such a problem. If we define such a structure, the source image will not be loaded on the webpage. The source image is displayed only when Javascript is executed. If the user's browser does not support or the user turns off the option supporting Javascript, this image cannot be displayed. That is to say, without Javascript support, our images cannot be displayed.

To solve this problem, we need to introduce the noscript tag. The general idea is as follows: Use noscript to include the actual image location. When the browser does not support Javascript, the image is displayed directly.

12	"lazy" src="img/grey.gif" data-original="img/example.jpg"width="640" heigh="480"><noscript>"img/example.jpg" width="640" heigh="480"></noscript>

Hide existing images and use show () to trigger display.

123	.lazy {  display: none;}

In this way, if the browser does not support Javascript, the custom img will not appear, and the images in noscript will be displayed. The specific implementation code is as follows:

1	$("img.lazy").show().lazyload();

Advance Loading

By default, the plug-in starts loading when you scroll to the image position. In this way, the user may first see a blank image and then appear slowly. If you want to load the image in advance before rolling, you can configure the parameters.

123	$("img.lazy").lazyload({    threshold : 200});

The threshold parameter is used to load data in advance. The preceding statement indicates that the image is loaded when there are still 200 pixels away from the image.

Custom trigger event

The default trigger event is scroll. When you scroll, it will check and load. You can use the event attribute to set your own loading event. Then you can customize the conditions for triggering this event and then load the image.

 

123	$("img.lazy").lazyload({    event : "click"});

Custom Display Effect

The default image has no effect, which is directly displayed after the download is complete. This is not a good user experience. You can set the effect attribute to control the image display effect. For example

123	$("img.lazy").lazyload({    effect : "fadeIn"});

The effect of fadeIn is to change the transparency of the image and gradually display it.

Insert an image into a container

If you use a smartphone, you will often go to the app website to download the app. They usually use a horizontal container to put some mobile phones. Using the container attribute, you can easily implement buffer loading in the container. First, we need to define the container with css and then load it with this plug-in.

1234	#container { height: 600px; overflow: scroll; }$("img.lazy").lazyload({    container: $("#container")});

Load invisible Images

Some images are invisible. We add images with properties such as display: none. By default, this plug-in does not load hidden invisible images. If we need to use it to load an invisible image, we need to set skip_invisible to false. The Code is as follows:

123	$("img.lazy").lazyload({    skip_invisible : false});

Okay, this is a brief introduction to lazyload. js. The following is a Demo for your reference.