最近在开发一个工具类的网站,网站的背景和各模块的构建都需要加载很多图片资源。网速快得情况下还好,但是网速稍微慢一些,就会出现页面上短暂的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平台上实现一个平滑的资源加载进度条。 #### 技术背景 J2ME是Java平台的一个版本,主要用于嵌入式设备和移动设备,如手机、PDA等。它包括两个主要部分:配置(Configuration)和剖面...
在网页设计和用户体验领域,动态加载进度条是一个重要的元素,它能够向用户显示数据或内容正在加载的过程,提高用户对系统响应的认知,并提供更舒适的等待体验。标题提到的"80个GIF进度条"是一套丰富的资源集合,...
总的来说,页面加载进度条是一个涉及前端开发多个方面的功能,包括JavaScript、HTML5、CSS以及性能优化策略。通过合理的设计和实现,它可以显著改善用户体验,让用户在等待页面加载的过程中感到更加舒适和耐心。
本文将深入探讨如何在Android中实现一个“dialog资源加载进度条”,并提供相关代码示例。 首先,Android中的ProgressDialog是一个内置的对话框类,用于显示一个带有可选取消按钮的进度指示器。然而,自Android 5.0...
本教程将详细介绍如何在Unity3D中实现一个简单而实用的场景加载进度条,同时展示百分比进度,以提供用户友好的加载体验。 首先,我们来理解"JumpSence-加载进度条.cs"这个文件名,它可能是一个C#脚本,用于处理场景...
总的来说,"jQuery数据加载进度条代码"是一个实用的资源,它演示了如何结合jQuery和CSS3来创建动态的用户体验,特别是在处理数据加载场景时。开发者可以通过学习和修改这个代码,为自己的项目添加类似的进度条功能,...
"仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器,它通常用于显示网页或内容加载的进度,给用户一个可视化的等待反馈,减少用户的焦虑感。在本文中,我们将深入探讨如何实现这样的功能,并...
unity游戏场景资源加载进度条Loading Screens for Mad Level Manager ,5种预制进度条样式,自动计算加载时间,支持uGUI和NGUI,可定制强,并且有个等待中与玩家互动的功能,大家自己研究下。
在本文中,我们将深入探讨如何使用ActionScript 3.0(AS3.0)来创建一个类似可口可乐网站的加载进度条效果。ActionScript是Adobe Flash Professional和FlashDevelop等工具中用于创建动态交互式内容的主要编程语言,...
通过以上步骤,我们就可以在Unity3D中实现一个基本的加载进度条功能。这只是一个基础框架,实际应用中可能需要根据项目需求进行定制,比如增加动画效果、优化性能等。此外,对于大型项目,还需要考虑资源管理和内存...
以上就是一个基本的jQuery动态页面加载进度条实现。通过这种方式,我们可以为用户提供更直观的加载体验,降低用户的等待焦虑感。然而,需要注意的是,由于JavaScript运行在客户端,这种方法只能模拟加载进度,对于...
在IT行业中,图片加载进度条是一种常见的用户体验设计,特别是在网页和移动应用中,它能够向用户展示图片加载的状态,提供视觉反馈,增加交互性。"image加载进度条.rar"这个压缩包可能包含了一些示例代码或者教程,...
本资源“flash actionscript3 纯AS3代码_资源加载进度条.rar”显然是一个关于如何使用AS3实现资源加载进度条的示例代码包。下面将详细探讨AS3中的资源加载和进度条实现相关的知识点。 1. **AS3基本概念** AS3是...
在网页设计中,用户体验是至关重要的,而页面加载进度条能有效地提高用户的感知速度,让用户在等待页面完全加载时有一个可视化的反馈。本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先,jQuery是一款...
本资源包包含了13种利用CSS3实现的网页加载进度条效果,这些效果既美观又实用,能够为你的网站增添亮点。 【描述】:“13种CSS3网页加载进度条效果” 这13种CSS3加载进度条效果展示了不同的设计风格和动画机制,...
HTML5的加载进度条动画是网页交互体验中的一个重要元素,尤其在用户等待内容加载时,一个酷炫的进度条能够提升用户体验,展示加载状态并缓解用户的等待焦虑。本资源"酷炫的html5进度条加载动画_加载进度条动画特效....
网站顶部显示预加载进度条插件`preload.js`是一个用于优化用户体验的重要工具,尤其是在现代网页设计中,它能够显著提高用户对网站加载速度的感受。预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,...
总结来说,"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案,它通过优雅的动画为用户提供了良好的等待体验,同时展示了JavaScript和CSS3在网页动态效果上的强大能力。...
标题提到的“易语言源码加载进度条v2.0.7z”是一个使用易语言编写的程序,主要功能是实现进度条的显示和控制,用于在执行耗时操作时提供用户反馈。 加载进度条是用户界面中常见的一种元素,它通常用于表示程序正在...
本资源"jQuery滑动加载进度条代码.zip"提供了一个实现动态进度条加载特效的代码实例,特别适用于网页加载过程中显示进度,提升用户体验。 首先,进度条在网页应用中扮演着重要角色,它可以让用户了解当前操作的进度...