js实现显示图片加载状态

　　为了在web上显示图片的时候有个友好的效果，希望在图片还未加载完成前显示loading图，加载成功之后显示图片，如果图片加载失败就显示加载失败了图片。

这篇文章主要借鉴了暗夜心慌方的博文，原文链接http://www.cnblogs.com/winclpt/articles/5604363.html。

　　首先认识一下Image对象：

var img = new Image();

这样就定义了了一个Image对象。

Image对象的属性有： border complete height width lowsrc name src vspace hspace

Image对象的事件有：onabort onerror onkeydown onkeypress onkeyup onload 

 

主要思路就是根据图片的加载状态展示不同的图片，当图片正在加载时，设置图片为loading.gif，当图片加载完成后，显示图片，如果图片加载失败，则显示failed.png；

 img.onerror = function(){
            img.src = 'images/failed.png';
        };

　　当图片正在加载时，在这里用的方法是为每张图片设置背景图，如果图片加载完成要展示的时候，只需要清楚其样式就可以了。

 showImage.style = "background:url(images/loading.gif) no-repeat center center;";

　　

　　判断img是否加载完成的依据是complete属性，这个属性在onload之前是false，在onload之后就会为true，当complete的值为true时，把定义Image对象的src赋值给要展示的图片位置。

img.onload = function(){
                if(img.complete == true){
                    showImage.cssText = "";
　　　　　　　　　　　　showImage.src = img.src;
                }
            }

　　

　　但是在IE中onload方法会失效，这时可以用onreadystatechange事件，这个事件是在向服务器发起请求时触发的，根据不同的readyState状态值，可在回调函数里触发不同的事件。

img.onreadystatechange = function(){
                /*在IE浏览器中Image对象的onload属性失效的解决办法.*/
                if(img.readyState == "complete" || img.readyState == "loaded"){
                   showImages.cssText = "";
                   showImages.src = img.src;
                }
}

具体的代码如下：

displayImages();

function displayImages(){
    //使用javascript判断浏览器类型
    var Browser = new Object();
    Browser.userAgent = window.navigator.userAgent.toLowerCase();
    Browser.ie = /msie/.test(Browser.userAgent);
    Browser.Moz = /gecko/.test(Browser.userAgent);


    /**
     * 判断图片是否加载
     * @param url
     * @param imgId
     * @param callback
     */
    function isImgLoaded(url,imgId,callback){
        var imgURL = url;
        var img = new Image();//创建Image对象

        //如果浏览器是ie的话
        if(Browser.ie){
            img.onreadystatechange = function(){
                /*在IE浏览器中Image对象的onload属性失效的解决办法.*/
                if(img.readyState == "complete" || img.readyState == "loaded"){
                    console.log(img.readyState);
                    callback(img,imgId);
                }
            }
        }
        else if(Browser.Moz){
            /*根据img的加载过程判断,只有加载完了complete的属性值才为true*/
            img.onload = function(){
                if(img.complete == true){
                    callback(img,imgId);
                }
            }
        }
        //如果因为各种问题图片加载不出来就显示这张加载失败图片
        img.onerror = function(){
            img.src = 'images/failed.png';
        };
        img.src = imgURL;//缓存图片
    }

    /**
     * 显示加载出来的图片
     * @param img
     * @param imgid
     */
    function showImg(img,imgid){
        document.getElementById(imgid).cssText = "";
        document.getElementById(imgid).src = img.src;
    }

    window.onload = function(){
        var imgList = document.getElementById('imgList').getElementsByTagName('img');
        $.ajax({
            url:"waterImg.json",
            type:"get",
            success:function(data){
                //console.log(data);
                for(var i=0;i<imgList.length;i++){
                    imgList[i].id = data[i].id;
                    //背景图设置为正在加载中的loading图，如果因为网络原因加载慢的话就会显示loading.gif
                    imgList[i].style = "background:url(images/loading.gif) no-repeat center center;";
                    isImgLoaded(data[i].img,data[i].id,showImg);
                }
            }
        })
    };
}

　　以下是html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现内容未全部加载完成的时候显示loading图</title>
    <style>
        #imgList img{
            display:block;
            width:200px;
            height:200px;
            float:left;
            margin:20px;
        }
    </style>
</head>
<body>
<p>为了图片有个友好的效果，未加载之前显示loading，加载完成才显示图片，如果找不到图片则显示加载失败failed</p>
<div id="imgList">
    <img alt="" />
    <img alt="" />
    <img alt="" />
    <img alt="" />
    <img alt="" />
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="knewImage.js"></script>
</body>
</html>

 

posted @ 2017-08-01 19:25  Yukiee  阅读(134)  评论(0)    收藏  举报