图片赖加载

来源：互联网发布：用友oa协同软件编辑：程序博客网时间：2024/04/28 05:53

什么是图片赖加载？

一般图片懒加载又称图片延时加载、惰性加载。也就是在用户需要使用图片的时候才加载，这样做的好处有：可以减少请求、节省带宽、提高页面加载速度、减少服务器压力, 提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。

图片赖加载其实在各大论坛、电商网站、图片网站被使用，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。

实现原理

当访问一个页面的时候，先把<img>元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否已经呈现在可视区内，当图片呈现在可视区内时，获取图片的真实地址并赋给该图片的属性即可(图片宽高需要指定，可以利用padding处理)。

具体实现

下面是实现代码：

  /* 获取节点 */      var oUl = document.getElementsByTagName('ul')[0];      var aLi = oUl.getElementsByTagName('li');      /* 创建img标签函数 */      function createImg(obj) {          var src = '';          if (obj.dataset.src) {              src = obj.dataset.src;          } else {              src = obj.getAttribute('data-src');          }          if (obj.children.length <= 1) {              var img = document.createElement('img');              img.src = src;              obj.appendChild(img);          }      }      /* 计算节点到文档顶部的距离 */      function getTop(obj) {          var h = 0;          while (obj) {              h += obj.offsetTop;              obj = obj.offsetParent;          }          return h;      }      /* 滚动实时计算所到区域并进行相关计算 */      window.onscroll = function() {          var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);          for (var i = 0; i < aLi.length; i++) {              if (getTop(aLi[i]) < t) {                  setTimeout('createImg(aLi[' + i + '])', 500)              }          }      }      /* 页面加载完便执行一次滚动函数 */      window.onload = function() {          window.onscroll();      }

See the Pen <a href="http://codepen.io/Dragon-G/pen/xdGMXr/">js图片赖加载</a> by Dragon.G (<a href="http://codepen.io/Dragon-G">@Dragon-G</a>) on <a href="http://codepen.io">CodePen</a>.


补充阅读：

图片延迟加载（lazyload）的实现原理
jquery lazyload延迟加载技术的实现原理分析
jquery.lazyload.js图片懒加载插件概述
height、clientHeight、scrollHeight、offsetHeight区别
document.body 和 document.documentElement 的区别
offsetwidth/clientwidth的区别
深入理解定位父级offsetParent及偏移大小

0 0