最近在开发一个工具类的网站,网站的背景和各模块的构建都需要加载很多图片资源。网速快得情况下还好,但是网速稍微慢一些,就会出现页面上短暂的CSS混乱或者图片空白的状况,使得用户体验相当的不好。所以就想到了使用一个资源加载进度条,在完成这些图片加载之后,再像用户显示界面。完成这个功能需要掌握如下key:
-
如何为css中的背景图设置缓存:其实很简单,只要缓存那张图片就可以了,也就是创建一个new一个image,src指向这张图片,也不用插入到文档中任何一个位置,这样浏览器缓存里就有了这张图片的记录了。
-
如何监控图片的加载过程:image对象本身就有onload方法,图片加载完成后onload被触发;如果加载出错,onerror被触发。
掌握了如上两点,创建一个资源加载等待的效果就不难了。现在说下我的步骤:
- 初始将真正的可视页面隐藏掉。这个样式一定在html中直接加上,不要在js运行时动态设定,否则你仍然会有大概1秒的时间看到那个难看的为搭建完成的页面。
- 创建一个覆盖整个页面的漂浮层,进度条就放在这个漂浮层中。
- 创建进度条。我就是创建一个简易的:一个div套一个灰色背景的span,span的初始宽度为0,之后随着进度值得变化而变大。
- 创建单张图片加载完成后的回调函数,实时计算进度值,并在所有图片加载完成后删除漂浮层和进度条。
- 为每个需要加载的资源图片创建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].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
}
};
jQuery(document).ready(beforeInit);
完成后的效果:
- 大小: 3.7 KB
分享到:
相关推荐
在J2ME上实现平滑的资源加载进度条 txt文本 源码描述:首先,我把我要加载的资源按其加载量来定其需要的百几比,比如我要加载一个大文件,一个小文件,我就将大文件定为80%,小文件定为20%,也就是把100%分为了两份...
提供android的进度条的一种实现形式
unity游戏场景资源加载进度条Loading Screens for Mad Level Manager ,5种预制进度条样式,自动计算加载时间,支持uGUI和NGUI,可定制强,并且有个等待中与玩家互动的功能,大家自己研究下。
flash actionscript3 纯AS3代码_资源加载进度条.rar
LoadingProgress 是一个加载网络图片的进度条。当耗时间特别长时,注入进度条是个不错的效果,可以实现类似QQ和微信的那种加载图片效果。 我看了一下网上加载进度条的方式,几乎都是自定义继承imageView画进度,...
程序不难,但实用性爆表,我就知道你正在电脑前为leader让你实现的功能在发愁,直接粘贴这段,让你打他脸
NULL 博文链接:https://dabei0.iteye.com/blog/397699
U3D加载进度条,需要的看看还可以,有代码............
Jquery实现网页进度条显示,用于页面预加载
加载进度条.zip易语言程序源码资源下载加载进度条.zip易语言程序源码资源下载 1.适合学生做毕业设计用 2.适合程序员学习研究用 3.适合新手自学研究使用
Image加载进度条.zip安卓程序源码资源下载Image加载进度条.zip安卓程序源码资源下载 1.学生做毕业设计用 2.程序员学习研究用 3.小公司换皮做新项目用
android集成MUPDF来加载显示网络PDF资源,在自己应用内打开,非调用外部。 带加载进度条。
加载进度条v2.0.zip易语言程序源码资源下载加载进度条v2.0.zip易语言程序源码资源下载 1.适合学生做毕业设计用 2.适合程序员学习研究用 3.适合新手自学研究使用
一个资源加载进度条的实现,各种各样的进度条加载方式,总有一种是你想要的。
易语言win8加载进度条效果源码。@资源源码站。
下载即可使用, 简单易用,一句代码即可实现。 线程方式,占用内存资源少
Qt提供了两种显示进度条的方式,一种是QProgressBar,提供了一种横向或纵向显示进度的控件表示方式。一种是QProgressDialog,用于描述任务完成的进度情况。
(1)可自定义进度条形式。 (2)运用委托支持异步加载.
包含资源文件