How to use the jquery plug-in lazyload.js to delay loading images

How to use the jquery plug-in lazyload.js to delay loading images_jquery

WBOY

Release： 2016-05-16 16:59:28

Original

1754 people have browsed it

If a webpage is very long and has many pictures, it will take a lot of time to download the pictures, which will affect the loading speed of the entire webpage. This lazy loading plug-in will load what you need to see based on your scrolling. Picture, and then it will request to download the picture from the background and finally display it. Through this plug-in, images can be downloaded only when they need to be displayed, thereby reducing server pressure and improving page loading speed.

Lazy Load plug-in principle

Modify the src attribute of the target img element to the orginal attribute to interrupt the loading of the image. Detect the scrolling state, then restore the src attribute of the img in the visible area of the web page and then load the image, thus creating a buffered loading effect. Code introduction method:

Copy code The code is as follows:

But now, many Javascript experts have analyzed that this plug-in does not really play the role of slow loading. This is indeed the case, and official instructions and solutions have been given.

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

So how should we solve it? In fact, it is very simple. You need to directly modify the structure of the HTML, add a new attribute to the img tag, point the value of the src attribute to the placeholder image, and add the data-original attribute to point to the real image address. For example:

Copy code The code is as follows:

Of course, in the above code we lazy load all the images in the page, but sometimes we don’t want this because some images don’t want them to be lazy loaded, so we can just do this:

For example, only buffer the images under loading class main

Copy code The code is as follows:

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

Load an image mounted with lazy class:

Copy code The code is as follows:

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

The rest can be deduced in the same way, just adjust the selector appropriately.

Advanced usage of lazyload.js:

The following part comes from the official document, which is a simple translation of the official document.

A more thoughtful approach

We have to think about this question. We have defined such a structure, so the source image will not be loaded in the web page. This source image will only be displayed when the Javascript is executed. If the user's browser does not support it or the user has turned off the option to support Javascript, then our image will not be displayed. In other words, without Javascript support, our images cannot be displayed.

To deal with this problem, we need to introduce the noscript tag. The general idea is as follows: use noscript to include the real image location, and when the browser does not support Javascript, display the image directly.

Copy code The code is as follows:

< ;noscript>

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

Copy code The code is as follows:

.lazy {
 display: none;
}

In this way, if the browser does not support Javascript, our customized img will not appear, but the image in noscript will be displayed. The specific implementation code is as follows:

Copy code The code is as follows:

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

Load ahead

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

Copy code The code is as follows:

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

threshold This parameter is used to load in advance. The meaning of the above statement is that when there are still 200 pixels away from the image, start loading the image.

Customized trigger events

The default trigger event is scrolling. When you scroll, it will be checked and loaded. You can use the event attribute to set your own loading event. Then you can customize the conditions that trigger this event and then load the image.

Copy code The code is as follows:

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

Customized display effects

The default image implementation effect is that there is no effect. After the download is completed, it will be displayed directly. This kind of user experience is not good. You can set the effect attribute to control the effect of displaying images. For example

Copy code The code is as follows:

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

The effect of fadeIn is to change the transparency of the image and appear in a faded way.

Insert the image into a container

If you use a smartphone, you often go to application websites to download applications. They usually use a horizontal container to put some screenshots from your mobile phone. Using the container attribute, buffered loading can be easily implemented in the container. First, we need to define this container with css, and then load it with this plug-in.

Copy code The code is as follows:

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

Load invisible image

Some images are invisible, so we add images with attributes such as display:none; to them. By default, this plugin will not load hidden invisible images. If we need to use it to load invisible images, we need to set skip_invisible to false, the code is as follows:

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

Okay, this is a brief introduction to the lazyload.js plug-in.