jQuery 图片懒加载插件 lazyload使用

图片延迟加载的好处

 

1、提高网页下载速度

2、及时响应用户需求

3、减少服务器负载压力

 

Lazy Load 介绍

Lazy Load延迟加载图像插件，直到用户滚动到它们才显示！

2.x插件版本用法说明

 

简单实例

 

 

需要引入jquery库和插件库两个js文件

<script>

            $(function(){
                function appendImg(){
                    let img=[];
                    // 创建30个图片元素  因为加载的都是同一个图片 这里用Math.random()会生成不重复的随机小数   这样每次请求是唯一的 
                    for(var i=0;i<30;i++){
                        let myimg=$("<img width='400' height='422' class='lazy'/>")
                        myimg.attr('data-src','http://i9.hexun.com/2021-01-25/202891431.jpg?v='+Math.random());
                        myimg.prop('src','img/3.jpg');
                        img.push(myimg);
                    }
                    // 向文档中追加图片
                    $("body").append(img);
                }
               appendImg();
              
            })
            // 调用插件方法
            window.addEventListener("load", function(event) {
                 let images = document.querySelectorAll(".lazy");
                 lazyload(images);
            });
        </script>

 

实例中img3.jpg图片表示为默认加载未完成时显示的图片