首页 专题 H5案例 前端导航 UI框架

图片懒加载其实并不难!

作者:TG 日期: 2016-06-07 阅读: 820
为了节约网络带宽和提高了初次加载的速度,现在各大网站里都使用了图片懒加载方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片。 光知道逻辑并不行,还需要用代码去实现,如何去实现呢?其实并不复杂,下面我会具体分析说明。 既然是图片懒加载,当然需要显示图片的img,不过我们不能直接添加src,而是给img设置一个新属性data-src,然后赋值为图片真正的地址,当然,你也可以定义任意合法的属性名。 在这里,我给每一个img都设置了一个默认图片,并定义class为lazyload,表示懒加载

<img src="default.png" class="lazyload"/>

注意:img在初始化的时候,如果你没有设置默认图片,那就不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。 接下来,我们来看看js:


首先,我们要添加滚动监听事件

window.onscroll = function() {   

  var sTop = document.body.scrollTop || document.documentElement.scrollTop;   

  _loadImage(sTop); }


当触发滚动事件时,调用_loadImage()方法,这里传入一个当前滚动条位置作为参数。

function _loadImage(sTop) {   

  var imgList = document.querySelectorAll(".lazyload");  

  for (var i = 0; i < imgList.length; i++) {  

   var el = imgList[i];   

   if (_isToShow(el, sTop)) {   

    var imgUrl = el.getAttribute("data-src");   

    el.setAttribute("src", imgUrl);   

    el.className = el.className.replace("lazyload", "");   

   }   

  };  

}

到这里,我们已经拿到了所有需要懒加载的img,但是,我们还需要去判断哪些是当前需要加载的,所以,_isToShow()函数就是关键了。

function _isToShow(el, sTop) {   

 var coords = el.getBoundingClientRect();   

 var wHeight = window.innerHeight || document.documentElement.clientHeight;   

 return (coords.top >= 0 && coords.left >= 0 && coords.top <= wHeight);   

}

getBoundingClientRect()

这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与浏览器上边和左边的距离。


上面就是整个懒加载的过程,不过,要注意一点,因为我们刚加载页面进来时,是不会触发滚动监听的,所以,我们要初始化,用来加载图片。

var sTop = document.body.scrollTop || document.documentElement.scrollTop;   

_loadImage(sTop);


图片懒加载就是这么简单,当然,这有可能不是最好的方法,后续会继续优化!


a

关注”全栈技术杂货铺“

全栈技术杂货铺