jquery Buffered loading Image plugin Lazyload.js use method

Lazyload.js is a jquery-based plugin that can be used to buffer the loading of images. If a webpage is long and has a lot of pictures, it takes a lot of time to download the picture, then it will affect the loading speed of the whole page, and this delay loading plugin will load the picture you need to see through your scrolling situation, then it will download the picture from the background and finally show it. This plugin allows you to download images when you need to display them, thus reducing the pressure on the server and increasing the speed of page loading.

Lazy Load Plug-in principle

Modifying the SRC attribute of the target IMG element is the orginal property, which interrupts the loading of the picture. Detects the scrolling state and then restores the SRC attribute of the IMG in the viewable area of the Web page and loads the image, 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", //加载图片前的占位图片         effect      : "fadeIn"//加载图片使用的效果(淡入)    });    });</script>

But now, a lot of JavaScript Daniel Analysis, this plug-in actually does not really play the role of slow loading. Indeed, the authorities have given explanations and solutions.

In fact, the reason is that in the new version of the browser, even if we remove the JavaScript control src attribute, the browser will still load the image.

So how do we fix it? It is also very simple, you need to directly modify the structure of the HTML, add a new attribute in the IMG tag, the SRC attribute value to the placeholder image, add the data-original attribute, to point to the real image address. Like what:

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

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

If only the image under load class main is buffered

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

Load an image mounted with the Lazy class:

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

And so on, just do the selector adjustment.

Lazyload.js advanced methods of Use:

The following section is from the official documentation, which provides a simple translation of the official documents.

A more holistic approach

We have to think about such a problem. We define such a structure, so the source image is not loaded in the page. This source image is displayed only if Javascript is executed. 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 Javascript support, 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 include the real image location, when the browser does not support Javascript, directly display the image.

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

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

123	.lazy {  display: none;}

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

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

Pre-load

By default, when you scroll to the image location, the plugin starts to load. This way, the user may first see a blank image, and then appear slowly. If you want to load the image ahead of time before the user scrolls, you can configure the parameters.

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

Threshold This parameter, which is used to load in advance. The above statement means that when the image is 200 pixels away, it starts loading the image.

Custom Trigger Events

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

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

customizing display effects

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

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

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

To insert an image into a container

If you use a smartphone, often go to the app website to download the app, they usually use a horizontal container, put some mobile phone. With the container property, buffer loading can be easily implemented in containers. First, we need to define this container with CSS and then load it with this plugin.

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

Loading an invisible image

Some images are not visible, we add similar display:none to them, and the image of such attributes. By default, this plugin is not loaded with hidden invisible images. If we need to load an invisible image with it, we need to set skip_invisible to false and the code is as follows:

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

jquery Buffered loading Image plugin Lazyload.js use method