js实现图片惰性加载

时间: 2019-05-21阅读: 529标签: 加载

关于惰性加载

在讲图片的惰性加载前,我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等,还有个好听的英文名字叫做 "lazyload"。需要注意的是,惰性加载并不只是图片的专利,Javascript 中函数也有惰性加载的概念,而在 Javascript 异步加载中还有个 LazyLoad类库,而图片的惰性加载库(lazyload)与之完全是两个概念,这些一定要弄清楚,以免混淆概念。

图片的惰性加载是啥意思?为什么要用它?当我们页面上的东西越来越丰富的时候,我们发现页面的加载速度却越来越慢,而图片的加载量无疑是 HTTP 请求里面的大头。其实很多时候,你把整个页面加载完,用户却不会滑动到最下面,也就是说很多东西其实白白加载了。因为图片的加载是大头,所以我们先拿图片开刀,我们假设,如果试图加载一个 HTML 页面,图片先不加载,当用户将页面往下滑动,图片该出现在可视区域时,再将该图片加载,这样就能将一开始打开页面的 HTTP 请求量降低,这就是图片的惰性加载。


实现

图片的惰性加载实现方式其实很简单。

  • 在 HTML 文件中将需要惰性加载的图片的 src 属性置为一个相同的地址(一般设置为一张 loading 图),这样这张图只会加载一次(第二次即会读取缓存),或者干脆置为空(用户体验不好),将真实的图片地址存储在别的属性中(比如 data-original 属性)
  • 监听事件(比如 scroll 事件),判断需要惰性加载的图片是否已经在可视区域,如果是,则将 src 属性替换成 data-original 属性值

接着我们来简单写下代码。

首先,按照第一步将真实的图片地址藏在 data-original 属性中。这里我假设所有图片都要进行惰性加载,现实开发中如果肯定是在第一屏的图片,它的 src 完全可以直接指向真实的地址。

<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

因为我把所有图片都设置为惰性加载模式,而首屏的图片需要直接显示,这里我写了个 init() 函数,注释都在代码中了:

function init() {
  var images = document.images;
  // 加载首屏图片
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    // 如果在可视区域并且还没被加载过
    if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      // 先调用 HTML5 方法
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    } else {  // 假设图片标签在 HTML 中的顺序和实际页面中顺序一致
      break;
    }
  }
}

代码中写了个 imageLoaded() 函数来将真实的图片地址指向元素,如果直接将 data-original 属性值指向图片的 src 属性的话,看到的图片可能会一段一段出现,而先将图片完全加载,然后再赋值使图片出现的话,体验就好多了。

function imageLoaded(obj, src) {
  var img = new Image();
  img.onload = function() {
    obj.src = src;
  };
  img.src = src;
}

OK,接着我们监听 scroll 事件。当用户滑动页面,图片出现在可视区域时,随即加载图片。

window.onscroll = function() {
  lazyload();
};

function lazyload() {
  var lazy = 0;
  var images = document.images;
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    }
  }
}

有的时候并不能当图片刚好在可视区域的时候再去加载,而要稍微 "预加载",可以调整下 lazyload() 函数中的 lazy 参数。

如果 "生硬" 地显示图片体验不大好,也可以搞点淡出效果,具体就不说了,可以看完整代码 Github:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
  ul {
    margin: 0 auto;
    padding: 0;
    width: 300px;
    list-style: none;
  }
  .lazy {
    margin-bottom: 100px;
    width: 300px;
    height: 168px;
    text-align: center;
    line-height: 168px; /*垂直居中*/
  }
    
</style>
<body>
    <ul>
      <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
    </ul>
  <script>
    init();
    function init() {
      var images = document.images;
      // 加载首屏图片
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        // 如果在可视区域并且还没被加载过
        if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          // 先调用 HTML5 方法
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        } else {
          break;
        }
      }
    }
    window.onscroll = function() {
      lazyload();
    };
    
    function lazyload() {
      var lazy = 500;
      var images = document.images;
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          obj.style.cssText = "transition: ''; opacity: 0;"
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        }
        if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
          obj.isShow = true;
          obj.style.cssText = "transition: 1s; opacity: 1;"
        }
      }
    }
    function imageLoaded(obj, src) {
      var img = new Image();
      img.onload = function() {
        obj.src = src;
      };
      img.src = src;
    }
  </script>
</body>
</html>

这样,一个简单的图片惰性加载 DEMO 就完成了!

PS:惰性加载虽然好处多多,但是也有一个 "非致命" 的缺点,影响 SEO。因为图片都被替换成假的图片,所以会影响图片的收录,所以这功能不建议在详情页使用

地址:https://github.com/lessfish/lessfish.github.io/tree/master/2015/picture-lazyload


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3393

页面加载时,vue生命周期的触发顺序

页面加载的时候,vue生命周期的触发顺序是怎样的呢?那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢?根实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)

小程序如何使用分包加载

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现

vue 原生添加滚动加载更多

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度

懒加载的3种实现方式

优势:性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。节约带宽:这个不需要解释。

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化

小程序页面预加载技术

之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术

html/css 滚动到元素位置,显示加载动画

每次滚动到元素时,都显示加载动画,如何添加?以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。

原生支持的懒加载已经到来!

现在你可能会想知道:“什么是原生懒加载,它是否值得添加到我的网站上?”好的,这正是我希望为你解答的问题,因为我会谈谈我使用它的经验。懒加载是指通过在用户需要时加载资源(例如图像资源)来提高性能。

webpack技巧:动态批量加载文件

这个需求本身不复杂,但是需要在组件中一次性引入十张图片,作为一个有代码洁癖的程序员,我是不允许这种重复性代码存在滴,于是乎就尝试有没有什么简单的方法。

如何判断css是否加载完成?

在通过ajax或者src动态获取js、css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作。那么如何判断css是否加载完成?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广