为你的网页加一个Loading !!!!

loading|网页

熟悉Flash的朋友都知道一般比较大的Flash作品都要加Loading以防止其播放不连续。相比之下网页就小的多,但是如果在网速很慢的情况下,打开一个10KB左右的网页的时间要超过30秒,这时就有必要加上Loading了。

Loading的原理很简单,在网页中加入一个不透明的层,z-index属性设为“100”,即使它处在最上一层也不例外,width、height都设为“100%”。当网页加载完毕触发onload事件时会将它隐藏。具体的代码如下:
 

<html>
<head><title>为网页加Loading

</title>

<meta http-equiv="Content-Type"

content="text/html; charset=gb2312">

</head>

<body >

<div id="Loading" style="position:absolute;width:100%; height:100%;z-index:100;background:white;">

<div id="Waiting" style="position:absolute;left:40%;top:50%;"></div></div>

<script>

var text="正在载入文档";i=0;

function load() {

if (i<6) {

text+=".";

Waiting.innerText=text;

i++;}

else {text="正在载入文档";i=0;}}

timer=window.setInterval("load()",300);

</script>

<!--以下是网页的内容.-->

<img src="http://图片地址">

</body>

</html>

OK!Loading就做完了,试一下吧,不过值得注意的是当文档中只有<script>和<iframe>标记时Loading可能不起作用。

时间: 2024-08-31 05:20:53

为你的网页加一个Loading !!!!的相关文章

也为网页加一个“Loading”过渡

loading|网页 熟悉Flash的朋友都知道一般比较大的Flash作品都要加Loading以防止其播放不连续.相比之下网页就小的多,但是如果在网速很慢的情况下,打开一个10KB左右的网页的时间要超过30秒,这时就有必要加上Loading了. Loading的原理很简单,在网页中加入一个不透明的层,z-index属性设为"100",即使它处在最上一层也不例外,width.height都设为"100%".当网页加载完毕触发onload 事件时会将它隐藏.具体的代码如

jQuery实现彩带延伸效果的网页加载条loading动画_jquery

本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画.分享给大家供大家参考,具体如下: 这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/

jquery显示loading图片直到网页加载完成的方法

  本文实例讲述了jquery显示loading图片直到网页加载完成的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html class="no-js"> <head> <meta charset='UTF-8'> <title>Simpl

jquery显示loading图片直到网页加载完成的方法_jquery

本文实例讲述了jquery显示loading图片直到网页加载完成的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html class="no-js"> <head> <meta charset='UTF-8'> <title>Simple Loader</title> <style> /* This only works with JavaScript, if it'

网页图片加载loading效果实现

网页加载图片时通常用背景图来显示,这样能确保图片不被拉伸变形.这个时候就需要用到img标签的onload函数来确认图片已经下载成功.实现方法如下: 1.把图片地址绑定到目标元素身上 url即为图片地址,src为div属性 2.用js获取src属性后,new Image();出一个图片,并赋值src地址 var img = new Image(); img.src=''; 3.通过onload的函数来判断下载是否完成 img.onload = function () { target.style.

MFC在登陆页面中 加一个显示验证码的控件应该加哪个?图片从一个网页中加载出来的

问题描述 MFC在登陆页面中 加一个显示验证码的控件应该加哪个?图片从一个网页中加载出来的 http://202.200.144.63/(gac14yvwcsjrzj45cx1fq4ed)/CheckCode.aspx 我想把这网页里的图片显示在登陆界面作为验证码,请问我该在对话框中加什么控件,我用的是下边的方法 CHtmlView* pView= (CHtmlView*)m_wndSplit.GetPane(0,1); pView->Navigate("http://hao.201201

IOS中UIWebView加载Loading的实现方法

  最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊! 第一种方法:使用UIView and UIActivityIndicatorView 代码如下: //创建UIWebView WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; [WebView setUserInteraction

JS实现网页加载进度条实例

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程.因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大

js 延迟加载 改变JS的位置加快网页加载速度_基础知识

当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo