lazyload 延迟加载

时间 2019-11-18

标签 lazyload 延迟加载繁體版

原文原文链接

0 前言

如今在作手机移动端的网站，由于是电商类，所以会有各类各样的图片，老大对于这么多图片的加载表示十分不爽，因而在各类探索能够延迟加载图片啊什么的方法，因而jquery.lazyload.js就映入眼帘了。html

github ： https://github.com/tuupola/jquery_lazyloadjquery

1 用法

jquery.lazyload.js 是基于jquery的，这里是从github上面下载下来的demos，分享在度盘了 http://pan.baidu.com/s/1eQkXSNCgit

简单写几个例子：默认的延迟加载、设定区域延迟加载、自定义事件延迟加载等，我以为这样的组合基本上就差很少够用了，更多的功能看看demo研究一下应给问题不大~github

1.1 准备工做

1.1.1 js库

首先固然了，jquery.js和jquery.lazyload.js都得有吧~？前者在网上找就好，不过笔者学习的时候用的1.4.2 ；后者直接去网盘分享里面扒就是了~chrome

1.1.2 图片

嗯，多准备一些图片有备无患啊，最好是每行一张的条件下可以多出浏览器可视范围不少，这样貌似能更好的观察效果啊~浏览器

1.2 html代码

话很少说，直接放代码，这段html代码基本上就不会变了函数

<!DOCTYPE html>
<html>
  <head>
    <title>lazyload的测试</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="pics1">
      <img data-original="img/1.jpg" alt="pic1-1" height="200" width="640" /><br />
      <img data-original="img/2.jpg" alt="pic1-2" height="200" width="640" /><br />
      <img data-original="img/3.jpg" alt="pic1-2" height="200" width="640" /><br />
      <img data-original="img/3.png" alt="pic1-3" height="200" width="640" /><br />
      <img data-original="img/1.png" alt="pic1-4" height="200" width="640" /><br />
      <img data-original="img/2.png" alt="pic1-5" height="200" width="640" /><br />
    </div>
    <div id="pics2">
      <img data-original="img/4.jpg" alt="pic2-1" height="200" width="640" /><br />
      <img data-original="img/4.png" alt="pic2-1" height="200" width="640" /><br />
      <img data-original="img/5.jpg" alt="pic2-2" height="200" width="640" /><br />
      <img data-original="img/5.png" alt="pic2-2" height="200" width="640" /><br />
    </div>
    
     <!--    这里留着用来写不一样的js代码，之后的代码就放在这里  -->


  </body>
</html>

很明显，img标签中没有咱们熟悉的src属性，取而代之的是 data-original属性，这个属性就是lazyload库用来延迟处理图片文件时所用的属性了，【绿字可不看：这个data-original属性固然是能够改的，只要改lazyload的源码就行了。。。工具

嗯，html代码打算一共展现10张图片，而且用br换行，为了演示更多的效果，将图片分为了2组，分别用两个div包裹了起来学习

每一个img标签设置了height和width属性，这个对于延迟加载来讲是颇有用的，本身加上跟去掉，尝试一下效果就行了，这里咱们先带着。开发工具

嗯，html就到这里，接下来是对lazyload的各类探索了~

1.3 各类延迟加载的尝试

首先须要说的是，貌似这个插件曾经作的是“假延迟”，听说仍然是所有将图片加载完以后再控制前台的显示，不过这个版本不是这个样子，插件到底何时加载了图片，能够用各类浏览器的开发工具查看，例如chrome的network标签

就是说明一种检验的方法，要否则我怎么知道它究竟是不是延迟加载了呢。。。如下开始正式尝试。

1.3.1 默认的延迟加载

嗯，仍然是直接放代码

<script src="jquery-1.4.2.min.js" ></script>
<script src="jquery.lazyload.min.js" ></script>
<script>
        $('img').lazyload();
</script>

嗯，这里只是简单的选取了全部img标签，而后调用lazyload方法，因而，你就能够打开chrome的network页面，访问这个页面了，你会发现只请求了页面可见范围左右的图片，并且还有一堆data:image……的请求，这些请求是lazyload插件默认的图片占位符，其实表示的就是一张图片了，有兴趣的话能够该lazyload代码换成本身想要的小图片代码

而后往下拉动浏览器滚动条，你会逐渐发现浏览器在逐个的请求页面下方的图片文件，这就是最简单的默认延迟加载。

1.3.2 加上加载效果的延迟加载

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('img').lazyload({
          effect : 'fadeIn'
        });
    </script>

加了一个effect的属性值，其余同上，只是当图片出现的时候会有一个淡入的效果

1.3.3 设定区域延迟加载

这大概是一种加速页面显示很容易想到的思路，好比先让用户可见部分加载，再让首先不可见的部分加载，最后再让其余很不重要的地方的图片慢慢加载【绿字可不看：我以为对于这个问题应该是有更好的处理方式，不过这里就拿lazyload解决了

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('#pics1 img').lazyload({
          effect : 'fadeIn'
        });
    </script>

与前面的区别仅仅是选择器不一样而已，相信看了这个效果你们就会各类选择区域设置不一样的加载场景了。

1.3.4 设定事件延迟加载

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('#pics2 img').lazyload({
          effect : 'fadeIn',
          event : 'waitforcall'
        });
        setTimeout(function(){
          $('#pics2 img').trigger('waitforcall');
        },5000);
    </script>

这里在lazyload里加了一个event属性，而这个事件名称彻底是本身起的，而后在接下来的脚本里面使用了一个延迟函数，5s后让pics2这个div中的图片们触发“waitforcall”事件，效果就是5s后让这些图片加载并淡入效果显示。

应该指出的是，既然使用的trigger来触发，那么即便这些图片不在当前可视范围内，也会在5s后加载。

有了这个示例，大概对于如何使用lazyload来处理整个页面图片的加载，加快页面显示速度，你们可能就会有一些想法了