图片加载

图片懒加载技术相信大家再熟悉不过了,当网站中用到大量图片时回事网站打开时加载过慢,用户体验不好。用户其实看到的是可视区域,可视区域下面的图片什么的可以不用加载,当用户滚动滚动条要看到还没加载的图片时,在让其进行加载。所谓懒加载,就是把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中,图片都是瞬间出现,而不是慢慢加载出来的。

本文示例:链接
本文代码地址:链接

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注