jquery.lazyload.js implements lazy loading of images

Reprinted from: https://www.cnblogs.com/yzg1/p/5051554.html

Introduction

lazyload.js is used for lazy loading of long page images. Images outside the viewport will be loaded when the window scrolls to its position, which is the opposite of preloading.

advantage:

It can improve page loading speed;
In some cases it can also help reduce server load.

Notice:

Don't write the sec attribute in the img tag anymore. You can test the effect yourself, and it will not be displayed if you write it.

Install

bower installation:

$ bower install jquery.lazyload

npm install:

$ npm install jquery-lazyload

use

lazyload depends on jquery. So first introduce jquery and lazyload

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

1. Write the image path to the data-original attribute
2. Add a class named lazy to the
lazyload image 3. Select all the images to be lazyloaded (img.lazy), and execute lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
    $(function(){
        $("img.lazy").lazyload();
    })
</script>

Note: The height or width of the image must be set, otherwise the plugin may not work properly

Early Loading - Threshold

The default lazyload is to load the image when scrolling to the image position. But it can be loaded when scrolling to a distance of xx px by setting the Threshold parameter.

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

The above example sets the scrolling to 20px from the image, and the image starts to load again.

Event trigger (can be jquery event or custom event) - Event

The image starts loading when the defined event is fired

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

The above example causes the image to be clicked before it starts to load

Tip: You can use this to implement lazy loading of images

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

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

The above code does not start loading the image until five seconds after the page is loaded

Setting Effects - Effects

The default loading effect of the plugin is show() that you can use any effect you want. The code below uses fadeIn()

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

Scroll the image inside the container - container

Plugins can also be used on images inside scrollable containers. The following div has a scrollerbar, the content of the content scrolls, and when it scrolls to the image position, the image starts to load

<div style="height:600px;overflow:scroll" id="container">
    <img class="lazy" data-original="img/example.jpg"  alt="" style="margin-top:1000px" height="200">
</div>
<script>
    $(function(){
        $("img.lazy").lazyload({
            container: $("#container")
        });
    })
</script>

pictures out of order

The plugin will perform a loop looking for unloaded images, which will check if the image is visible, and by default, the loop will stop when an image outside the first view is found.
但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。

代码：

$("img.lazy").lazyload({
    failure_limit : 10
});

设置加载loading——placeholder

$("img").lazyload({
placeholder: "/pic/downLoad?name=loading.gif"
});

处理隐藏图片——skip_invisible

为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;

注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

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