`
pepple
  • 浏览: 39733 次
  • 性别: Icon_minigender_1
  • 来自: 亳州
社区版块
存档分类
最新评论

等待加载资源的时候显示转菊花

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="<%=basePath%>404page/css/main.css" type="text/css" media="screen, projection" /> <!-- main stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="../css/tipsy.css" /> 

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

<script type="text/javascript" src="../js/jquery.js"></script> 

<script type="text/javascript">
function universalPreloader(){
		
	var pre = $("#universal-preloader>div");
	
	//centering function
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", (($(window).height() - this.outerHeight()) / 2) + "px");
		this.css("left", (($(window).width() - this.outerWidth()) / 2) + "px");
		return this;
	}
	
	//center to the screen
	pre.center();
	
	//run each time user resizes window
	$(window).resize(function() {
	
		pre.center();
							  
	});
	
}

function universalPreloaderRemove(){
		
	var parentD = $("#universal-preloader");
	var pre = $("#universal-preloader>div");
	
	pre.delay(1000).animate({opacity:'0'},{duration:400, complete:function(){
	
		parentD.animate({opacity:'0'},{duration:400, complete:function(){
		parentD.remove();
		
		}});
																																		 
	}});
	
	
}

//DOM加载完毕,图片,js等未加载完成
$(document).ready(function(){
	//转菊花,等待...		
	universalPreloader();
						   
});

//所有资源都加载完毕,移除转菊花...
$(window).load(function(){
	//移除转菊花...
	universalPreloaderRemove();
	
	...
	
						   
});

</script>


<title>404 - Not found</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

<!-- Universal preloader -->
<div id="universal-preloader">
    <div class="preloader">
        <img src="../images/universal-preloader.gif" alt="universal-preloader" class="universal-preloader-preloader" />
    </div>
</div>
</body>
分享到:
评论

相关推荐

    滚动图标滚动菊花等待图标

    在IT界,用户界面(UI)设计中,滚动图标、滚动菊花和等待图标是至关重要的元素,它们在提升用户体验方面发挥着关键作用。这些图标通常出现在数据加载、处理或网络请求正在进行时,向用户显示系统状态,确保用户知道...

    自定义ProgressBar的菊花加载

    在Android开发中,ProgressBar是用于显示进度或加载状态的一个组件,它可以帮助用户了解应用程序后台运行的任务正在处理中。本主题将深入探讨如何自定义ProgressBar,特别是实现“菊花加载”效果,这种效果通常在...

    Android菊花加载,方便的dialog加载

    通过自定义布局和Dialog类,我们可以创建出符合应用需求的加载提示,让用户的等待过程更加友好。而`LoadingProgressBar`这个文件名可能是指一个专门用于菊花加载的进度条组件,可能包含了特定的样式或扩展功能,你...

    10.视频加载影响播放显示菊花转

    在Flutter开发中,"视频加载影响播放显示菊花转"这一问题通常指的是在视频内容加载过程中,为了给用户呈现一个友好的界面体验,我们通常会在视频加载时显示一个加载指示器,也就是常说的“菊花转”(即加载动画)。...

    简单的加载菊花控件

    这种控件以旋转的菊花图案显示,给用户一种反馈,让他们知道应用正在工作并等待片刻。在iOS应用中,良好的用户体验至关重要,而加载菊花控件就是实现这一目标的重要工具。 实现一个简单的加载菊花并不复杂,正如...

    GDI_转菊花_转菊花_gdi_源码

    “转菊花”通常是一个旋转的图形元素,用来表示程序正在进行后台处理或加载数据,用户需要等待。在描述中提到,该示例可以接受自定义的PNG图片作为转菊花的图形,这表明代码可能包含了读取和渲染PNG图像的逻辑。 在...

    业务加载中显示等待图片

    等待图片,也被称为加载图标、进度指示器或菊花图,是用户界面设计的一个关键元素。它们以视觉方式向用户表明系统正在处理请求,并提示用户等待片刻。这有助于减少用户的焦虑感,避免他们误认为应用卡死或无响应。 ...

    安卓进度条loadingprogress相关-Android菊花进度条打开在加载过程中显示菊花效果.rar

    菊花进度条通常在数据加载、网络请求或其他耗时操作时显示,为用户呈现一种动态等待的视觉效果。 首先,我们来理解一下Android中的进度条类型。Android SDK提供了多种进度条样式,包括Horizontal(水平)、Circular...

    页面加载等待效果

    7. **用户体验设计**:除了技术实现,还要考虑设计元素,如加载图标的设计应简洁且易于理解,颜色应与页面主题协调,加载提示语应友好且告知用户大致的等待时间或进度。 总之,页面加载等待效果是提高用户体验的...

    Android 加载数据等待特效

    具体到压缩包中的文件,可能是包含了一些示例代码或者资源文件,用于展示如何在Android项目中实现加载数据等待特效。解压后,开发者可以通过查看代码结构、布局文件以及动画资源,学习如何将这些特效集成到自己的...

    加载动态图集锦

    无论是进度条、菊花还是其他类型的加载动态图,其目标都是为了使用户在等待过程中感到更加舒适和安心。在设计和选择加载动态图时,开发者和设计师需要充分考虑用户体验、性能和品牌形象等多个因素。

    页面加载等待 loading 特效

    在网页设计中,页面加载等待效果(loading特效)是一种常见的用户体验优化手段,它可以在内容尚未完全加载时向用户展示一个动态的进度条或图形,让用户知道页面正在努力加载,从而减少用户的焦虑感和跳出率。...

    菊花加载ProgressBar播放图片实现Frame

    在Android开发中,"菊花加载"通常指的是正在加载或者等待状态的动画效果,它以一个旋转的菊花(或称为环形进度条)来表示。这种加载样式被广泛应用于网络请求、数据加载等场景,给用户一种操作正在进行的视觉反馈。...

    Android菊花对话框,菊花进度条

    在Android应用开发中,用户界面的设计与交互是至关重要的,其中加载等待的提示方式就是一种常见的用户体验优化手段。"Android菊花对话框,菊花进度条"是Android开发中的一个专题,它涉及到自定义控件、动画效果以及...

    课堂资源代码(Android-ProgressBar 自定义菊花加载效果)

    这个课堂资源代码主要探讨的是如何自定义ProgressBar,创建出一种特殊的“菊花”(也称为环形或旋转)加载效果。这种效果常用于网络请求或者数据加载时,让用户知道应用正在进行后台操作。 首先,我们需要了解...

    6种显示网页正在加载中的代码

    1. **简单文本提示**:最基础的加载提示是通过在页面中央显示简单的文本,如“加载中...”或“请稍候”。这可以通过JavaScript和CSS轻松实现。例如,可以在HTML中创建一个隐藏的元素,然后在页面加载时通过...

    旋转UI等待界面

    旋转UI等待界面,通常指的是在应用程序执行耗时操作时显示的一种加载或等待提示,以告知用户程序正在运行并请求他们耐心等待。这种界面通常会以动画的形式呈现,如旋转的菊花、环形进度条等,既美观又能有效降低用户...

    ios-菊花.zip

    在iOS开发中,"菊花"通常指的是菊花加载指示器(UIActivityIndicatorView),它是苹果提供的一个用于显示应用程序正在后台执行任务的视图控件。这个控件通常以旋转的菊花图案显示,让用户知道应用正在进行数据加载或...

    iOS开发WebView加载时显示转圈功能

    在WebView加载网页的过程中,用户可能会等待一段时间,为了提供更好的用户体验,开发者通常会在加载过程中显示一个“菊花”(菊花图表,即圆形进度条),以告知用户应用正在努力加载内容。本篇将详细讲解如何在Swift...

    菊花转动的jquery加载动画效果

    最后,文章中提到的“菊花转动的加载动画效果”实际上是指旋转的菊花图案作为加载动画,通常这种动画会让用户感觉到应用正在快速响应,并且提升用户的等待体验。在实际开发中,我们可以通过替换`url("../img/ico/...

Global site tag (gtag.js) - Google Analytics