Js之图片懒加载插件（echo.js和lazyLoad.js）使用示例

####本文介绍了图片懒加载插件jquery.lazyload.min的使用方法。如果您使用的是vue框架，请移步。

教程开始:
>pc端

1：引入js文件 [建议放到页脚]

```
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
```

2:功能实现
```
<img src="images/blank.gif" alt="" data-original="images/azu1.jpg">
```

3:js调用

```
$("img").lazyload({
        // 当图片完全加载的时候，插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果
        effect: "fadeIn",
        //lazyload插件默认用户滚动到图片位置时才触发加载图片，如果我们希望滚动到距离图片一定位置就触发加载，可以指定lazyload函数的threshold参数
        //threshold: 200,
        //如果我们希望滚到到图片的位置后，还要通过click或hover事件来唤醒图片的加载，我们可以指定lazyload函数的event属性
        //event: "click"
    });
```

>移动端

```

<div class="lanren">
    <li><img src="images/blank.gif" data-echo="images/azu1.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu2.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu3.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu4.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu5.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu6.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu7.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu8.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu9.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu10.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu11.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu12.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu13.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu14.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu15.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu16.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu17.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu18.jpg" /></li>
    <li><img src="images/blank.gif" data-echo="images/azu19.jpg" /></li>
    <li><img  src="images/blank.gif"data-echo="images/azu20.jpg" /></li>
</div>
<script src="js/echo.min.js"></script>
<script>
    echo.init();
</script>

```

注:原创不易,转载请注明出处( https://micuu.com/new/510.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。