打开网页显示从1到100的进度条然后进行跳转_随笔

<html>

<head>

<title>跳转到ifloveme.com</title>

</head>

<body>

<P align=center><FONT face=Arial color=#0066ff size=2>loading...</FONT>

<INPUT style="PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-WEIGHT: bolderPADDING-BOTTOM: 0pxCOLOR: #0066ffBORDER-TOP-style: nonePADDING-TOP: 0pxFONT-FAMILY: ArialBORDER-RIGHT-style: noneBORDER-LEFT-style: noneBACKGROUND-COLOR: whiteBORDER-BOTTOM-style: none"

size=46 name=chart>

<BR>

var bar=0

var line="||"

var amount="||"

count()

function count(){

bar=bar+2

amount =amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99){

setTimeout("count()",100)

}else{

window.location = "http://www.ifloveme.com/"

}

</script>

</P>

</form>

</body>

</html>

二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。

一楼的方法不是正确的。如果简单地放一个loading图片在页面上的话，会有两种情况：一、有可能实现加载的效果。二、在整个页面其它元素加载了大部分或全部后，这张图片才加载进来，那就实现不了加载的效果了。

常规的解决办法还是用ajax比较好。大概是这样的。

需要两个页面。1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片

先请求第2个页面，在这个页面中放一段ajax请求第1个页面，在success函数里将页面内容输出，并将loading图片隐藏掉。

代码是这样的：

loading page:

<body>

<body>

$.ajax({

type: 'GET',

url: 实际页面路径,

data: {},

success: function(){

$('body').append(data)

$('#loadingImg').hide()//或直接remove()

dataType: 'html'

})

</script>

==========================================================

呵呵，一个加载的问题要考虑搜索的话原来就这么麻烦了。 <div id="forspider">.....给搜索蜘蛛看的纯HTML....</div>这里面的内容是整个实际页面的HTML吗？是的话，那这个loading页面本身加载就很笨重了，还不如直接跳到真实页面呢。哎，可惜我不太懂搜索，悲剧。请指教----为什么要用绝对定位覆盖的方法来隐藏。直接把这一层display:none的话蜘蛛也会看不到吗？

可以用html5实现，也可以做成gif的图片，你只需要设置为和你程序设置一样的时间然后进度条自动结束就好了。用图片是最好实现，用ps软件就可以制作。

这个的实现，有很多中方法，简单的，是使用 DIV 嵌套，例如：

</div>

100px 代表 100 分， 64px 代表实际的得分

该进度条是100毫秒，+ 1% ，10秒钟后，跳转页面！要改时间的话！改100就好了

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6132942.html

打开网页显示从1到100的进度条然后进行跳转

发表评论

评论列表（0条）