用JQuery实现页面Loading的效果，即：当页面加载完成前显示Loading的进度条，全部加载完成之后进度条消失_随笔

二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用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的话蜘蛛也会看不到吗？

<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>

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

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

用JQuery实现页面Loading的效果，即：当页面加载完成前显示Loading的进度条，全部加载完成之后进度条消失

发表评论

评论列表（0条）