JS图片预加载

标签：js   图片预加载   

这里我直接上代码吧

需要引入jquery或者zepto

1、CSS 主要是简单的加载进度样式

<!-- css -->
.loadPage{background:#007CC2;z-index: 9999;width: 100%;position: fixed;top: 0;bottom: 0;}
.loading{position:absolute;width:100%;left:0%;top:30%;margin:20px auto;text-align:center;}
.loading .inner{overflow:hidden;position:relative; z-index:10;background-color:#fff;margin:0 5%; }
.loading-progress{width:0;height:2px;text-align:center;background-color:#ffe400;}
.loading-num{height:50px;font:1.5em/30px arial;color:#fff;}
.loading-num b{font-weight:100;}
.loading-txt{font:14px/30px Arial;color:#337eee;padding-top:20px;}
.loadBgB{width:100%;position:absolute;height:300px;left:0;top:80px;overflow:hidden; }

<!-- html -->
<div class="loadPage" style="z-index:99999;">
	<div class="loading">
		<div class="loading-num"><b></b></div>
		<div class="inner">
			<div class="loading-progress"></div>
		</div>
		<div class="loadBgB">
			<span class="yunBg" ></span>
			<span class="cityBg" ></span>
			<span class="planload" ></span>
		</div>
	</div>
</div>

<!-- js -->
/**
 * loadImg  图片预加载
 * @param   {Array}     预加载图片的对象数组
 * author   jianminlu 
 * update   2014-06-20 9:35:13
 */
var loadImg = function(pics, callback){
    var index = 0;
    var len = pics.length;
    var img = new Image();
    var flag = false;
    var progress = function(w){
        $(‘.loading-progress‘).animate({width:w}, 100, ‘linear‘, function(){
            $(".loading-num").html(w);
            // 测试图片，不使用请注释
        });

        $(‘.loadLogo i‘).animate({height:w},100, ‘linear‘)
    }
    var load = function(){
        img.src = pics[index];
        img.onload = function() {
            // 控制台显示加载图片信息
            //console.log(‘第‘ + index + ‘个img被预加载‘, img.src);
            progress(Math.floor(((index + 1) / len) * 100) + "%");
            index ++ ;
            if (index < len) {
                load();
            }else{
                callback()
            }
        }
        return img;
    }
    if(len > 0){
        load();
    }else{
        progress("100%");
    }
    return {
        pics: pics,
        load: load,
        progress: progress
    };
}
var pics = [
    "http://51.com/tech/2014/wmfh/bookface.png",
    "http://51.com/tech/2014/wmfh/clickBnt.png",
    "http://51.com/tech/2014/wmfh/handBg.png",
    "http://51.com/tech/2014/wmfh/iphIcon.png",
    "http://51.com/tech/2014/wmfh/newsrPic.png",
    "http://51.com/tech/2014/wmfh/numBg.png",
    "http://51.com/tech/2014/wmfh/p2bingB.png",
    "http://51.com/tech/2014/wmfh/p2bings.png",
    "http://51.com/tech/2014/wmfh/pageBg.jpg",
    "http://51.com/tech/2014/wmfh/upBnt.png",
    "http://51.com/tech/2014/wmfh/world.png"
];
// 调用
loadImg(pics, function(){
    setTimeout(function(){
        $(".loadPage").hide();
        Layout.page(0, Layout._hpx);
        $(".global").addClass("goin")
    }, 500);
});

本文出自 “让希望不再失望！” 博客，请务必保留此出处http://peterz2011.blog.51cto.com/3186140/1600608

JS图片预加载

标签：js   图片预加载   

原文地址：http://peterz2011.blog.51cto.com/3186140/1600608