图片赖加载

什么是图片赖加载?

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

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


实现原理

当访问一个页面的时候,先把<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();
      }

height="265" scrolling="no" title="js图片赖加载" src="//codepen.io/Dragon-G/embed/xdGMXr/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/Dragon-G/pen/xdGMXr/">js&#22270;&#29255;&#36182;&#21152;&#36733;</a> by Dragon.G (<a href="http://codepen.io/Dragon-G">@Dragon-G</a>) on <a href="http://codepen.io">CodePen</a>.&#10;

补充阅读:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值