2021年还在用jquery吗,JQuery之图片懒加载

由于现在很多的网站都带有大量的图片，而图片的加载又会特别的慢，特别是在移动端，懒加载就显的特别重要了，说白了就是按需加载，用户要看到哪里就显示哪里，下面来记录一下懒加载的基本实现步骤！

1.引入jquery.js与jquery.lazyload.js，由于jquery.lazyload.js依赖于jquery，所以必须要引入jquery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

2.配置lazyload，比如加载效果、没有加载时显示的默认图片等等，可以简单的封装一个方法，方便去调用．

function lazy(className) {

　　$(className).lazyload({

       //图片显示时淡入效果
　　　　effect: "fadeIn",

       //没有加载图片时的临时占位符
　　　　placeholder: "images/default.png",

       //图片在距离屏幕 200 像素时提前加载.
　　　　threshold: 200,

　　　　//将图片加载放进click事件中（不常用）
　　　　event:"click",
　
　　　　//加载隐藏的图片（不常用）
　　　　skip_invisible : false

        
　　　　//其他配置项请查看官网
　　});

}

3.调用懒加载，在动态加载img时添加class="lazy"，并配置自定义属性data-original="请求的图片地址"，方便与插件绑定，并定义图片的宽高，图片的宽和高可以写在class里

<img class="lazy" alt=""  data-original="后台请求的图片地址" width="640" height="480" />

在请求完图片数据循环完成时调用lazy方法

lazy('img.lazy');