图片加载

图片懒加载技术相信大家再熟悉不过了，当网站中用到大量图片时回事网站打开时加载过慢，用户体验不好。用户其实看到的是可视区域，可视区域下面的图片什么的可以不用加载，当用户滚动滚动条要看到还没加载的图片时，在让其进行加载。所谓懒加载，就是把img的src放在一个自定义属性中，src为空，当触发某个事件时把自定义属性的值赋给src。

<img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509098785051&di=0cdd1c1cb8314d1fe3c460f3e13ece59&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1207%2F1052%2Fntk121408.jpg" alt="" class="myimg" />

var img = document.getElementsByTagName('img')[0];
img.src = img.getAttribute("data-src");

当然，一些小图片可以这样做，因为加载快嘛，一瞬间就完成了，但是网络比较慢的时候加载一些大图片时，就不太好了。
一般懒加载默认有个默认的显示图片，但是直接替换的话，如果加载慢的话图片一下没加载出来就会显示一片空白，这样不太好，应该做到替换时图片直接显示出来，图片没加载完成还是显示的默认图片。这就要用到我们今天所说的东西了，判断图片加载完成后触发的事件。

判断图片加载完成一般有三种方法

load事件

var img = document.getElementsByTagName('img')[0];
var Img = new Image();
Img.src = img.getAttribute("data-src");
Img.onload = function (){

}

简单粗暴，基本上所有浏览器都支持，但是有一个问题，在IE、Opera等浏览器中第一次加载是正常的，但是同一张图片再次加载时不会触发onload事件了，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后就不在执行onload事件了。

onreadystatechange事件

var img = document.getElementsByTagName('img')[0];
var Img = new Image();
Img.src = img.getAttribute("data-src");
Img.onreadystatechange = function (){
    if(Img.readyState=="complete"||Img.readyState=="loaded"){

}
}

在ie下，img对象与xhr对象一样具有onreadystatechange事件，可以通过该事件判断图片是否加载完成，ie特有的，其他浏览器不支持。且问题和上面问题一样。

img的complete属性

complete 属性可返回浏览器是否已完成对图像的加载，如果加载完成，则返回 true，否则返回 fasle，基本所有浏览器都支持，且不会有上面的问题。
我们可以用其特性，做一个定时器，查看其是否加载完成，完成加载后执行一个回调函数。

<button onclick="loadImage(document.getElementsByTagName('img'),imgLoaded,allimgLoaded)">加载</button>
<img data-src="https://ouzdb04w7.bkt.clouddn.com/image/2017/10/27/timg1.jpg" src=""  alt="" class="myimg" />
<img data-src="https://ouzdb04w7.bkt.clouddn.com/image/2017/10/27/timg2.jpg" src="" alt="" class="myimg" />
<img data-src="https://ouzdb04w7.bkt.clouddn.com/image/2017/10/27/timg3.jpg" src="" alt="" class="myimg"/>

function loadImage(objarr,callback,allcallback){
    var timer = null;
    var i = 0;
    var len = objarr.length;
    var load;
    load = function(i){
        if(i<len){
            var img = new Image();
            img.src = objarr[i].getAttribute("data-src");
            timer = setInterval(function(){
                if(img.complete){
                    clearInterval(timer);
                    callback(objarr[i++],img);
                    load(i);
                }
            },80);
        }else{
            allcallback();
        }
    };
    load(0);
}
function imgLoaded(obj,img){
    obj.src = img.src;
    console.log(img.width);
}
function allimgLoaded(){
    alert("图片全部加载完成");
}

ok，上面将一堆图片的data-src链接放在了src中，图片都是瞬间出现，而不是慢慢加载出来的。

本文示例：链接

本文代码地址：链接