jquery_lazyload插件学习

╰半夏微凉° 2022-07-11 09:20 399阅读 0赞

在加载有很多图片的页面时，如果一开始就把图片加载完的话，会导致页面加载速度慢，而且有时用户并不会看完整个页面，所以一开始就加载完所有图片不太合理。

有个JQuery插件可以实现图片的懒加载，就是先加载用户当前视图的图片，滑倒滚动条后再加载其他图片。

### jquery\_lazyload插件的地址： ###

> [https://github.com/tuupola/jquery\_lazyload][https_github.com_tuupola_jquery_lazyload]

### 介绍下简单的用法： ###

1.下载项目，把jquery.lazyload.js引用到项目中，注意还需要jq的支持；  
2.写一个简单的测试文件，如下：

<body>
        <img class="lazy" data-original="/res/img/bmw_m1_hood.jpg" width="640" height="480"><br/><br/><br/><br/>
        <img class="lazy" data-original="/res/img/bmw_m1_hood.jpg" width="640" height="480"><br/><br/><br/><br/>
        <img class="lazy" data-original="/res/img/bmw_m1_hood.jpg" width="640" height="480"><br/><br/><br/><br/>
        <img class="lazy" data-original="/res/img/bmw_m1_hood.jpg" width="640" height="480"><br/><br/><br/><br/>
        <img class="lazy" data-original="/res/img/bmw_m1_hood.jpg" width="640" height="480"><br/><br/><br/><br/>
    
    </body>
    </html>
    <script src="res/scripts/libs/main.js"></script>
    <script src="res/scripts/tools/jquery.lazyload.js"></script>
    <script type="text/javascript"> $(document).ready(function () { $("img.lazy").lazyload(); }); </script>

这样就能实现最基本的懒加载功能，实现原理是img标签中不直接写src属性，而是写一个data-original属性，值则为图片地址，当滚动条滚动时将查找当前所见区域中【img.data-original】，将其替换为data-original，并删除data-original属性。

### 其他特性介绍： ###

#### 触发事件： ####

改变加载触发事件，可以设定图片加载的事件，例如，改变点击才加载：

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

也可以添加定时器，如下：

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

#### 显示方式： ####

默认是调用show()方法，可以改为fadeIn，如下：

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

其他特性等项目再深入学习。

参考资料：

> [http://www.appelsiini.net/projects/lazyload][http_www.appelsiini.net_projects_lazyload]

[https_github.com_tuupola_jquery_lazyload]: https://github.com/tuupola/jquery_lazyload
[http_www.appelsiini.net_projects_lazyload]: http://www.appelsiini.net/projects/lazyload