黑马程序员技术交流社区

标题: 【广州前端】- lazyload图片懒加载插件使用简介 [打印本页]

---

作者: AngularBaby    时间: 2018-3-21 17:37
标题: 【广州前端】- lazyload图片懒加载插件使用简介


jQuery图片延迟加载插件--lazyload，使用 lazyload插件 可以提高网页的打开速度。同时，也能帮助减轻服务器的负载。




使用方法：
1. 引入文件（注意：先引入jq，后引入lazyload！）
例如：

[JavaScript] 纯文本查看 复制代码

 

<script src='./js/jquery-1.11.0.min.js'></script>

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

2. 在html的img中添加 class="lazy" ，
   原本要写在img标签src的图片地址，写到 data-original="图片地址" 中
例如：

[JavaScript] 纯文本查看 复制代码

 

<img class="lazy" data-original="images/1.jpg">

    <img class="lazy" data-original="images/2.jpg">

    <img class="lazy" data-original="images/3.jpg">

    <img class="lazy" data-original="images/4.jpg">

    <img class="lazy" data-original="images/5.jpg">

    <img class="lazy" data-original="images/6.jpg">

    <img class="lazy" data-original="images/7.jpg">

    <img class="lazy" data-original="images/8.jpg">

3. 在script里初始化

[JavaScript] 纯文本查看 复制代码

<script> 

        $("img.lazy").lazyload({

            effect: "fadeIn"

        });

    </script>

demo案例代码见附件

最新干货精彩资源点击查看

lazyload.zip

2018-3-21 17:36 上传

点击文件名下载附件

1.14 MB, 下载次数: 142

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2