js实现图片的懒加载

前端js实现页面图片懒加载

前端技术发展至今，我们对性能的追求不断提升，不断变化的是技术，但我们对用户体验的极致追求却始终如一。
所有前端(特别是soe除了类)都会因图片的加载而发愁，图片作为巨大的请求信息类，用时巨大。
那我们该如何处理呢?
这就涉及到了图片懒加载 所谓懒加载其实就是一种视觉欺骗
我们先去掉所有图片的src 将其改成 data-src

<img data-src = "images/case/Exhibition.png"/>

因为没有src属性存在 页面就不会发送异步请求图片 那么就得到了性能提升，很多人就会说了 那图片就没了啊 别急
js代码如下

function imgonload(){
    //maximum接收当前页面的  可见高度+滚动高度
    var maximum = document.documentElement.scrollTop + window.innerHeight;
    //minimum 接收当前的滚动高度
    var minimum = document.documentElement.scrollTop;
    //获取所有的图片
    var img = document.querySelectorAll("img");
    //循环图片集合
    for(var i = 0;i < img.length;i++){
        //如果当前图片没用src值
        if(!img[i].getAttribute("src")){
            //如果当前图片和屏幕顶部的距离 大于滚动高度且小于滚动高度
            if(img[i].getBoundingClientRect().top >= minimum && img[i].getBoundingClientRect().top <= maximum){
                //如果当前网址不是传统IE内核
                if(IEVersion() === "edge"||IEVersion() === 11||IEVersion() === -1){
                    //取出dataset.src成为图片的src属性
                    img[i].setAttribute("src",img[i].dataset.src)
                //否则就是传统的IE内核
                }else{
                    //如果当前图片有data-src属性
                    if(img[i].getAttribute("data-src")){
                        //将data-src属性负成图片的src值
                        img[i].setAttribute("src",img[i].getAttribute("data-src"))
                    }
                }
            }
        }
    }
}

然后呢，我们可用在js执行的最开始 和 滚动事件触发时执行这个方法

//滚动事件
document.onscroll = function(e){
        //滚动条时触发图片懒加载
        imgonload();
}
//最开始加载
imgonload();