lazyload 延迟加载

最新推荐文章于 2024-11-05 15:26:40 发布

weixin_30522183

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量54

点赞数

文章标签： javascript 开发工具 ViewUI

原文链接：http://www.cnblogs.com/lzxsdl/p/3993434.html

版权

0 前言

现在在做手机移动端的网站，因为是电商类，因此会有各种各样的图片，老大对于这么多图片的加载表示十分不爽，于是在各种探索可以延迟加载图片啊什么的方法，于是jquery.lazyload.js就映入眼帘了。

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

1 用法

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

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

1.1 准备工作

1.1.1 js库

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

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来处理整个页面图片的加载，加快页面显示速度，大家可能就会有一些想法了

转载于:https://www.cnblogs.com/lzxsdl/p/3993434.html