js实现图片懒加载

一、图片懒加载原理

浏览器是否发起请求图片是根据<img>中src的属性，所以实现原理就是在图片没有进入可视区域的时候将图片链接放在datasrc中，等到图片载入可视区域再给src赋值

二、懒加载思路及实现

懒加载的实现这里提供的两种方法

1.html和css部分

• css

<style>
    #app img{
        height: 500px; width:800px;margin: 10px auto;display: block;border: 1px solid #ccc;
    }
    @keyframes fadeIn{
        0%{opacity: 0.1;}
        100%{opacity: 1;}
    }
</style>

• html

<div id="app">
    <img class="01" datasrc="img/WechatIMG2.jpeg" alt="加载中" src="" />
    <img class="02" datasrc="img/WechatIMG3.jpeg" alt="加载中" src="" />
    <img class="03" datasrc="img/WechatIMG4.jpeg" alt="加载中" src="" />
    <img class="04" datasrc="img/WechatIMG5.jpeg" alt="加载中" src="" />
    <img class="05" datasrc="img/WechatIMG6.jpeg" alt="加载中" src="" />
    <img class="06" datasrc="img/WechatIMG7.jpeg" alt="加载中" src="" />
</div>

2. js部分，这里介绍两种方法

2.1.传统的方法，利用window和document的API

2.1.1.在实现具体方法前介绍几个API和优化性能的方法

• 浏览器可视窗口高度：window.innerHeight
• 滚动区域高度：document.body.scrollTop和document.documentElement.scrollTop
• 元素距离文档顶部距离：Element.offsetTop
• 函数节流：

事件触发后执行函数执行期间内事件再次触发，执行函数将不会执行，等规定时间之后事件触发，执行函数方可再次执行。

• 函数防抖：下文中未用到，就和函数节流一起介绍了。

事件触发停止一定时间后才会执行响应的函数，期间如果重复调用动作，重新计算时间。类似于，按下一个弹簧，只有你松手的时候弹簧才会弹起。本质上是将多次操作合并为一次操作。可用一个定时器维护，事件触发后wait时间内如果事件重复触发，那么取消当前定时器，重新设置一个时延为wait的定时器。

2.1.2.具体实现图片懒加载代码

window.onload=function(){
    var imgs=document.querySelectorAll('img');
    lazyLoadImg(imgs)
    window.addEventListener('scroll',throttle(imgs,lazyLoadImg,200))
}
//函数节流,在规定时间内才执行一次图片加载函数，解决耗费性能，浏览器卡顿问题。
function throttle(imgs,lazyLoadImg,wait){
    var lastTime=new Date().getTime()
    return function(){
        var curTime=new Date().getTime()
        if(curTime-lastTime<wait)return
        lastTime=curTime
        lazyLoadImg(imgs)
    }
}
//图片懒加载
function lazyLoadImg(imgs){
    //浏览器可视窗口高度
    var windowActiveH=window.innerHeight;
    //滚动区域高度
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    for(var i=0;i<imgs.length;i++){
        //如果满足图片可加载条件，加载此图片
        if(isImgLoad(imgs[i],scrollTop,windowActiveH)){
            imgs[i].src=imgs[i].getAttribute('datasrc')
            imgs[i].style.cssText="animation:fadeIn .5s"//类似fadeIn动画效果
        }
    }
}
//是否满足图片加载条件
function isImgLoad(imgItem,scrollTop,windowActiveH){
    //imgItem.offsetTop图片距离文档顶部距离
    var isScrollBottom=imgItem.height+imgItem.offsetTop>scrollTop;//满足从下向上滚动时显示图片的条件
    var isScrollTop=imgItem.offsetTop<scrollTop+windowActiveH//满足从上向下滚动动显示图片的条件
    var isNoSrc=!imgItem.getAttribute("src")//满足第一次加载图片条件
    if(isScrollTop && isScrollBottom && isNoSrc){
        return true
    }
    return false
}

2.2.Intersection Observer API

提供了一种异步观察目标元素与祖先元素或顶级文档的交集中的变化的方法。

2.2.1.Intersection observer 概念和用法

• 概念

Intersection Observer API 允许你配置一个回调函数，每当目标(target)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(root)。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(root)元素的交集，请指定根(root)元素为null。
目标(target)元素与根(root)元素之间的交叉度是交叉比(intersection ratio)。这是目标(target)元素相对于根(root)的交集百分比的表示，它的取值在0.0和1.0之间。

• 用法，创建一个 intersection observer

var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);

• 参数 Intersection observer options

(1).root
指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
(2). rootMargin
root元素的外边距。类似于css中的 margin 属性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定root参数，则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。
(3). threshold
可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候 回调才会被执行。

• Targeting an element to be observed

为每个观察者配置一个目标
var target = document.querySelector('#listItem');
observer.observe(target);
每当目标满足该IntersectionObserver指定的threshold值，回调被调用。
只要目标满足为IntersectionObserver指定的阈值，就会调用回调。回调接收 IntersectionObserverEntry对象和观察者的列表：

可去https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API自行查阅Intersection Observer API
ok话不多说，咱们来看看这个新特性具体怎么实现图片懒加载的吧~

2.2.2.具体实现图片懒加载代码

window.onload=function(){
    //这里root是浏览器视窗，target元素是img
    var options={
        root:null,//指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
        rootMargin:'0px',//root元素的外边距
        threshold:0.4//target元素和root元素相交程度
    }
    var target=document.getElementsByTagName('img')
    var observer=new IntersectionObserver(callback,options)//创建一个 IntersectionObserver对象，并传入相应参数和回调用函数
    for(var i=0;i<target.length;i++){
        observer.observe(target[i])//为每个观察者配置一个目标
    }
}
function callback(entries,observer){
    for(var j=0;j<entries.length;j++){
        if(!entries[j].isIntersecting){//isIntersecting为true，表示满足指定条件并显示在屏幕上
            continue;
        }
        var attriDatasrc=entries[j].target.attributes.datasrc.value
        var attriSrc=entries[j].target.attributes.src.value
        if(attriDatasrc && !attriSrc){
            var className=entries[j].target.className
            document.getElementsByClassName(className)[0].setAttribute("src",attriDatasrc)
        }
    }
}

三、总结

• Intersection Observer API缺点：照比传统方法是浏览器新特性，兼容性差一些。只目前只兼容到Chrome51.0和Android Webview51.0
• Intersection Observer API优点：这种方式，网站将不需要为了监听两个元素的交集变化而在主线程里面做任何操作，并且浏览器可以帮助我们优化和管理两个元素的交集变化。