js：图片懒加载

如果有时候网站的图片特别多的话，你直接一下加载出来，页面就顿半天，卡的一b，客户看见这样的网站就直接关闭网页了，所以当网站图片很多的时候，首先原图片的像素不要太大，我们用用一些图片压缩工具，grunt，webpack之类的，其实说白了就是把图片转成base64,不用去请求服务器，最后还是卡，我们就用懒加载！

原理：利用html5的 data-属性存储图片的src地址，图片本来src地址设置为空.其次利用滚动监听实现动态的把data-属性的地址添加到src的地址上，让在可视区域的元素中的图片动态加载！来吧！上代码


//html
<div class="box"><img src="" data-src="img/1.jpg"></div>
<div class="box"><img src="" data-src="img/2.jpg"></div>
<div class="box"><img src="" data-src="img/3.jpg"></div>
<div class="box"><img src="" data-src="img/4.jpg"></div>
<div class="box"><img src="" data-src="img/5.jpg"></div>
<div class="box"><img src="" data-src="img/6.jpg"></div>
<div class="box"><img src="" data-src="img/71.jpg"></div>

js//
var oimgs = document.getElementsByTagName("img");
layLoadImage() 
//网页第一次打开的时候我们执行这个方法，让直接window的可视区域的图片加载出来
if(window.addEventListener){
window.addEventListener("scroll",layLoadImage,false)
}else{
window.attachEvent("onscroll",layLoadImage)
} //兼容判断监听滚动事件

function layLoadImage(){
  var seeHeight=document.documentElement.clientHeight
  // 获取window可视区域的高度                
  var     scrollTop=document.documentElement.scrollTop||document.body.scrollTop  //获取滚动条的高度
   var numImg=oimgs.length  
   //获取图片个数
   var num=0 
  // 为了防止图片重复遍历，我们添加一个数字来保存已经加载的个数
  for(var a=num;a<numImg;a++){
    var oimgOffsetTop=oimgs[a].offsetTop 
    //获取改图片距离文档定点的高度
    if(seeHeight+scrollTop>oimgOffsetTop){
    console.log(1)
     oimgs[a].src=oimgs[a].getAttribute('data-src')
     num++
    }
   //这里是核心，如果窗口可视区域加上滚动条的距离大于改图片距离文档最定点的距离，那就要把data-src属性里存储的图片地址直接赋值给图片本身的src真是地址，这样图片就加载出来了，然后让num++记录已经加载过的图片个数，下次滚动条再滚动的时候我们就不用再重复遍历所有的图片进行判断
 }

}

js代码实测兼容所有的主流浏览器！可以直接复制去用！写这博客写了半天，饿死了！我去吃饭了，靠！

补充一下这个offset属性，指的是距离上层级（这个上层级不包括div）对象的距离，意思就是有你的图片外面包了一层div，这个div并不是图片的上层级。当然一般情况，外面的div不算他的上层级，那么就会一层一层往上，那图片的上层级就是body了,有时候图片是放在li里面，那么上层级就是li了，这时候我们做懒加载，总是要取得图片距离文档最定点的距离，那改怎么办呢？

getOffsetTop(ojb){ //ojb目标元素
  var top=ojb.offsetTop
  var parOjb=ojb
  while(parOjb=parojb.offsetParent){
    top+=parOjb.offsetTop
  }
  return top
}
//offsetParent 是对象的上层级
//这样得出来的offsetTop值总是距离文档顶端的距离

这里面最巧妙的时通过while 条件循环把对象的上层级一直赋值给一个对象，一直求这个对象的offsetTop累加，直到最顶层的时候对象自己和对象的上层级就是一样的，因为终止了，然后循环停止！这个距离永远是目标元素距离文档最顶层的距离

猜你喜欢