Jquery plug in lazyload.js lazyload image use method

If a page is very long and has a lot of images, it takes a lot of time to download the images, which can affect the loading speed of the entire page. This lazy loading plug-in will load the images you need to see through your scrolling condition, and then it will request to download the images from the background, and finally display them. With this plugin, you can download images only when you need to display them, which can reduce the pressure on the server and improve the page loading speed.

Lazy Load plug-in principle

Change 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 img in the visual area of the page and load the image, thus creating a buffered loading effect. Code introduction method:

<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", //A placeholder image before loading the image
         effect      : "fadeIn" //Effect of loading images (fade in)
    });
    });
</script>

But for now, many Javascript analysts have concluded that the plug-in is not really caching. Indeed, the authorities have given explanations and solutions.

The reason is that in the new version of the browser, even if we remove the SRC property controlled by Javascript, the browser will still load the image.

So how do we solve this? In fact, it is also very simple, you need to directly modify the structure of HTML, in the img tag to add new attributes, the value of the SRC attribute to the placeholder image, add the data-original attribute, so that it points to the real image address. Such as:

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

For example, only images under the load class main are cached

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

Load the image with the lazy class:

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

The rest of the analogy, the appropriate selector adjustments to the line.

Lazyload.js advanced usage:

The following part is from the official document, which is simply translated.

A more thoughtful approach

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

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

.lazy {
  display: none;
}

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

Loading in advance

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

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

Threshold is a parameter that is used to load in advance. The above statement means that when the image is 200 pixels away, the image is loaded.

Custom trigger events

The default trigger is to scroll, and as you scroll, it checks and loads. You can use the event property to set your own load event, and then you can customize the conditions that trigger this event, and then load the image.

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

Custom display

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

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

The effect of fadeIn is to change the transparency of the image, to appear gradually.

Insert the image into some container

If people use smart phones, they often go to the application website to download the application, they usually use a horizontal container, put some screenshots of the phone. Using the container property, you can easily implement buffered loads in the container. First, we need to define the container with CSS, and then load it with the plug-in.

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

Load the invisible image

Some of the images are not visible, so we add display:none; Etc. Properties of the image. By default, the plug-in does 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, so that's a brief introduction to the lazyload.js plug-in.