图片预加载。。。。。。舒-鲜- 阳

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="log"></div>

<div id="imgContainer" style="display: none">
    <img data-src="http://h.hiphotos.baidu.com/image/pic/item/58ee3d6d55fbb2fb3c13d9044c4a20a44623dce8.jpg">
    <img data-src="http://c.hiphotos.baidu.com/image/h%3D200/sign=73b518fcb5fd5266b82b3b149b199799/8601a18b87d6277f6c51262f2b381f30e924fc62.jpg">
    <img data-src="http://a.hiphotos.baidu.com/image/pic/item/9f510fb30f2442a7e13e65b3d243ad4bd11302f7.jpg">
    <img data-src="http://c.hiphotos.baidu.com/image/pic/item/d52a2834349b033b1930d9cd16ce36d3d539bd68.jpg">
</div>

<script>
var onLoad = function( src, callback ){
    var img = new Image();
    img.onload = function(){
        img.onload = new Function;
        callback && callback( img );
    };
    img.onerror = function(){
        img.onerror = new Function;
        callback && callback( img );
    };
    img.src = src;
};

var loadImgQueue = function( list, progress ){
    if( !(list instanceof Array) ){
        list = list.split(",");    
    }
    var index = 0,
        length = list.length,
        imgObj = list[index];

    onLoad(list[index].src, function( imgEl ){
        progress && progress(++index, length, imgObj);
        if( index > length - 1 )
            return;
        onLoad((imgObj=list[index]).src, arguments.callee);
    });
};

var getLoadingImgs = function( container ){
    var imgContainer = document.getElementById(container);

    var imgs = imgContainer.getElementsByTagName('img');
    var imgObj = [];
    for(var i=0; i<imgs.length; i++){
        imgObj.push({
            elm: imgs[i],
            src: imgs[i].getAttribute('data-src')
        });
    }

    return imgObj;
}

var log = document.getElementById("log");

loadImgQueue(getLoadingImgs('imgContainer'), function(loaded, total, objItem){
    objItem.elm.setAttribute('src', objItem.src);
    objItem.elm.removeAttribute('data-src');
    log.innerHTML = "图片加载进度：" + parseInt((loaded/total)*100).toString() + "%";
    if( loaded == total ){
        imgContainer.style.display = 'block';
    }         
});
</script>
</body>
</html>

 

posted @ 2016-04-01 15:20  Shimily  阅读(123)  评论(0)    收藏  举报