`
DBear
  • 浏览: 231042 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

做一个资源加载进度条

阅读更多

最近在开发一个工具类的网站,网站的背景和各模块的构建都需要加载很多图片资源。网速快得情况下还好,但是网速稍微慢一些,就会出现页面上短暂的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].onload=chk;
	  imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
	}
};

jQuery(document).ready(beforeInit);
 
完成后的效果:



 

 

  • 大小: 3.7 KB
分享到:
评论

相关推荐

    在J2ME上实现平滑的资源加载进度条

    本文将详细介绍如何在J2ME平台上实现一个平滑的资源加载进度条。 #### 技术背景 J2ME是Java平台的一个版本,主要用于嵌入式设备和移动设备,如手机、PDA等。它包括两个主要部分:配置(Configuration)和剖面...

    80个GIF进度条,漂亮的动态加载进度条

    在网页设计和用户体验领域,动态加载进度条是一个重要的元素,它能够向用户显示数据或内容正在加载的过程,提高用户对系统响应的认知,并提供更舒适的等待体验。标题提到的"80个GIF进度条"是一套丰富的资源集合,...

    页面加载进度条

    总的来说,页面加载进度条是一个涉及前端开发多个方面的功能,包括JavaScript、HTML5、CSS以及性能优化策略。通过合理的设计和实现,它可以显著改善用户体验,让用户在等待页面加载的过程中感到更加舒适和耐心。

    dialog 资源加载进度条

    本文将深入探讨如何在Android中实现一个“dialog资源加载进度条”,并提供相关代码示例。 首先,Android中的ProgressDialog是一个内置的对话框类,用于显示一个带有可选取消按钮的进度指示器。然而,自Android 5.0...

    Unity3D动态加载进度条

    本教程将详细介绍如何在Unity3D中实现一个简单而实用的场景加载进度条,同时展示百分比进度,以提供用户友好的加载体验。 首先,我们来理解"JumpSence-加载进度条.cs"这个文件名,它可能是一个C#脚本,用于处理场景...

    jQuery数据加载进度条代码.zip

    总的来说,"jQuery数据加载进度条代码"是一个实用的资源,它演示了如何结合jQuery和CSS3来创建动态的用户体验,特别是在处理数据加载场景时。开发者可以通过学习和修改这个代码,为自己的项目添加类似的进度条功能,...

    仿微信网页加载进度条

    "仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器,它通常用于显示网页或内容加载的进度,给用户一个可视化的等待反馈,减少用户的焦虑感。在本文中,我们将深入探讨如何实现这样的功能,并...

    unity游戏场景资源加载进度条Loading Screens for Mad Level Manager

    unity游戏场景资源加载进度条Loading Screens for Mad Level Manager ,5种预制进度条样式,自动计算加载时间,支持uGUI和NGUI,可定制强,并且有个等待中与玩家互动的功能,大家自己研究下。

    AS3.0 加载进度条效果

    在本文中,我们将深入探讨如何使用ActionScript 3.0(AS3.0)来创建一个类似可口可乐网站的加载进度条效果。ActionScript是Adobe Flash Professional和FlashDevelop等工具中用于创建动态交互式内容的主要编程语言,...

    U3D加载进度条

    通过以上步骤,我们就可以在Unity3D中实现一个基本的加载进度条功能。这只是一个基础框架,实际应用中可能需要根据项目需求进行定制,比如增加动画效果、优化性能等。此外,对于大型项目,还需要考虑资源管理和内存...

    jquery动态页面加载进度条

    以上就是一个基本的jQuery动态页面加载进度条实现。通过这种方式,我们可以为用户提供更直观的加载体验,降低用户的等待焦虑感。然而,需要注意的是,由于JavaScript运行在客户端,这种方法只能模拟加载进度,对于...

    image加载进度条.rar

    在IT行业中,图片加载进度条是一种常见的用户体验设计,特别是在网页和移动应用中,它能够向用户展示图片加载的状态,提供视觉反馈,增加交互性。"image加载进度条.rar"这个压缩包可能包含了一些示例代码或者教程,...

    flash actionscript3 纯AS3代码_资源加载进度条.rar

    本资源“flash actionscript3 纯AS3代码_资源加载进度条.rar”显然是一个关于如何使用AS3实现资源加载进度条的示例代码包。下面将详细探讨AS3中的资源加载和进度条实现相关的知识点。 1. **AS3基本概念** AS3是...

    jQuery模拟页面加载进度条

    在网页设计中,用户体验是至关重要的,而页面加载进度条能有效地提高用户的感知速度,让用户在等待页面完全加载时有一个可视化的反馈。本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先,jQuery是一款...

    13种CSS3网页加载进度条效果

    本资源包包含了13种利用CSS3实现的网页加载进度条效果,这些效果既美观又实用,能够为你的网站增添亮点。 【描述】:“13种CSS3网页加载进度条效果” 这13种CSS3加载进度条效果展示了不同的设计风格和动画机制,...

    酷炫的html5进度条加载动画_加载进度条动画特效.zip

    HTML5的加载进度条动画是网页交互体验中的一个重要元素,尤其在用户等待内容加载时,一个酷炫的进度条能够提升用户体验,展示加载状态并缓解用户的等待焦虑。本资源"酷炫的html5进度条加载动画_加载进度条动画特效....

    网站顶部显示预加载进度条插件preload.js

    网站顶部显示预加载进度条插件`preload.js`是一个用于优化用户体验的重要工具,尤其是在现代网页设计中,它能够显著提高用户对网站加载速度的感受。预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,...

    Loading网页加载进度条动画效果.zip

    总结来说,"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案,它通过优雅的动画为用户提供了良好的等待体验,同时展示了JavaScript和CSS3在网页动态效果上的强大能力。...

    易语言源码加载进度条v2.0.7z

    标题提到的“易语言源码加载进度条v2.0.7z”是一个使用易语言编写的程序,主要功能是实现进度条的显示和控制,用于在执行耗时操作时提供用户反馈。 加载进度条是用户界面中常见的一种元素,它通常用于表示程序正在...

    jQuery滑动加载进度条代码.zip

    本资源"jQuery滑动加载进度条代码.zip"提供了一个实现动态进度条加载特效的代码实例,特别适用于网页加载过程中显示进度,提升用户体验。 首先,进度条在网页应用中扮演着重要角色,它可以让用户了解当前操作的进度...

Global site tag (gtag.js) - Google Analytics