做一个资源加载进度条

最近在开发一个工具类的网站，网站的背景和各模块的构建都需要加载很多图片资源。网速快得情况下还好，但是网速稍微慢一些，就会出现页面上短暂的CSS混乱或者图片空白的状况，使得用户体验相当的不好。所以就想到了使用一个资源加载进度条，在完成这些图片加载之后，再像用户显示界面。完成这个功能需要掌握如下key：

 

1. 如何为css中的背景图设置缓存：其实很简单，只要缓存那张图片就可以了，也就是创建一个new一个image，src指向这张图片，也不用插入到文档中任何一个位置，这样浏览器缓存里就有了这张图片的记录了。
2. 如何监控图片的加载过程：image对象本身就有onload方法，图片加载完成后onload被触发；如果加载出错，onerror被触发。

掌握了如上两点，创建一个资源加载等待的效果就不难了。现在说下我的步骤：

1. 初始将真正的可视页面隐藏掉。这个样式一定在html中直接加上，不要在js运行时动态设定，否则你仍然会有大概1秒的时间看到那个难看的为搭建完成的页面。
2. 创建一个覆盖整个页面的漂浮层，进度条就放在这个漂浮层中。
3. 创建进度条。我就是创建一个简易的：一个div套一个灰色背景的span，span的初始宽度为0，之后随着进度值得变化而变大。
4. 创建单张图片加载完成后的回调函数，实时计算进度值，并在所有图片加载完成后删除漂浮层和进度条。
5. 为每个需要加载的资源图片创建Image对象，全部创建完成后逐一绑定回调函数。

下面是具体的代码：

window.beforeInit = function(){
	/** 其他js动态初始化操作*/

        /** 资源等待效果创建开始 */
	var l=0;
	var imgs;
	var sum=0;
	var imgs=new Array();
	
	var height = jQuery('body').height() + 'px';
	var width = jQuery(window).width() + 'px';

        //可以事先在html中加入空的div，专做漂浮层所用
        jQuery('#pagemasker').css({'position':'absolute', 'z-index':'3000', 'width':width, 'height':height, 'filter':'alpha(opacity=1)', 'opacity':1, 'top':0, 'left':0, 'background':'#FFF', 'display':'block'});
	
        // 进度条
        var loadingProgressBar = "<div class='progressArea'>资源加载中。。。<div class='progressBar'><span class='progressBarItem'></span></div></div>";
        jQuery('#pagemasker').append($(loadingProgressBar));    

        //图片加载回调函数
	function chk(){
	  l--;
	  jQuery('.progressBarItem').css('width',((sum-l)/sum)*300+"px");
	  if (l==0){
                  //图片全部加载完成，显示页面， 隐藏漂浮层， 删除进度条
		  $('.outwrapper').css('display','');
		  jQuery('#pagemasker').css({'position':'absolute', 'z-index':'3000', 'width':width, 'height':height, 'filter':'alpha(opacity=1)', 'opacity':1, 'top':0, 'left':0, 'background':'#CCC', 'display':'none'});
		  jQuery('.progressArea').remove();
		  
	  }
	}

        //加载所需图片
	if (document.images){
	  imgs[0]=new Image();
	  imgs[1]=new Image();
	  imgs[2]=new Image();

	  imgs[0].src="/images/editor/home_bg.png";
	  imgs[1].src="/images/editor/home_bg.jpg";
	  imgs[2].src="/images/editor/P.png";	  
	}

	sum=l=imgs.length;
	for (var i=0;i<l;i++){
	  imgs[i].οnlοad=chk;
	  imgs[i].οnerrοr=chk;//无论图片是否加载成功，都执行指定方法
	}
};

jQuery(document).ready(beforeInit);

 

完成后的效果：