图片懒加载实现

发表于 | 分类于 | | 阅读次数:
字数统计: 466 字 | 阅读时长 ≈ 2 分钟

图片懒加载实现

图片懒加载定义

当元素进入到浏览器视窗时（或者稍微提前，需给定提前量），才开始加载图片；

不给img元素的src属性赋值时，不会发出请求【不能使src=""，这样即使只给src赋了空值也会发出请求】

在开始的时候将资源url放置在自定义属性data-src当中，然后在需要加载的时候获取该属性并赋值给元素的src属性

实现

以下逻辑判断元素是否进入视窗：

1
2
3
4
5
6
7
8
9
10
11
12
 function isInSight(el){
   var eldom = typeof el == 'object'?el:document.querySelector(el);
   var bound = eldom.getBoundingClientRect();
   // 这里的bound包含了el距离视窗的距离；
   // bound.left是元素距离窗口左侧的距离值；
   // bound.top是袁术距离窗口顶端的距离值；

  // 以以上两个数值判断元素是否进入视窗；
  var clientHeigt = window.innerHeight;
  var clientWidth = window.innerWidth;
  return bound.top>=0&&bound.left>=0&&bound.top<=window.innerHeight&&bound.left<=window.innerWidth;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 当加载完成，检测并加载可视范围内的图片
window.onload= checkAllImgs;
// 添加滚动监听，即可视范围变化时检测当前范围内的图片是否可以加载了
window.addEventListener("scroll",function(){
	checkAllImgs();
})

// 检测所有图片，并给视窗中的图片的src属性赋值，即开始加载；
function checkAllImgs(){
  let imgs = document.querySelectorAll("img");
    Array.prototype.forEach.call(imgs,function(el){
      if(isInSight(el)){
        loadImg(el);
      }
    })
  }
  // 开始加载指定el的资源
  function loadImg(el){
    let eldom = typeof el == 'object'?el:document.querySelector(el);
    if(!eldom.src){
      // 懒加载img定义如：<div class="img"><img  alt="加载中" data-index=7 data-src="http://az608707.vo.msecnd.net/files/MartapuraMarket_EN-US9502204987_1366x768.jpg"></div>
      let source = eldom.getAttribute("data-src");
      let index = eldom.getAttribute("data-index");
      eldom.src = source; 
      console.log("第"+index+"张图片进入视窗，开始加载。。。。")
    }
  }
}