加了一个页面loading效果


大家可以用IE点点本站的其它链接看看效果哦~比如顶部导航中的“踢馆!!!”
原理就是利用CSS的转换滤镜一定要把后面的元素一定要加载完成才会进行转换,还有监视是不是有离开本页的动作发生,组合起来就可以了~

这是加到页面head区域的CSS的转换滤镜

程序代码 程序代码
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)">

用onbeforeunload事件来监视离开本页的动作然后控制ID为loading的DIV的显示,加到</body>上面

程序代码 程序代码
<script language="JavaScript" type="text/javascript">
function loading(){
    document.getElementById("loading").style.display="block";
    document.getElementById("loading").style.top=(document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop)+300+’px’;
}
window.onbeforeunload=loading;</script>
<div id="loading" style="position:absolute;top:300px;left:0px;width:100%;text-align:center;z-index:100;display:none;"><span style="color:#FFF;background-color:#C00;font-size:16px;"> ㊕㊢ 正在加载… </span></div>

这样就完成了,HOHO,这个也可以叫AJAX吧,虽然和“X”没什么关系……
其实这样做是让浏览的人等的时间长了一些,因为一定要等后面的页面loading结束后才会显示,所以没什么用,到是当离开页面时就出现这个loading有一些意思,感觉好有人工智能哦~

UPDATE 2006-12-27:加了一行让DIV一直在当前屏幕中间的代码

发布者:s5s5

https://s5s5.me

“加了一个页面loading效果”上的24条回复

  1. firefoxer浏览本店速度比用ie的速度快,用ie的比firefoxer看到的效果好……

  2. [surprise] 这是手工的啊,与程序没关……你把图标搞走,再用li来列表,再用CSS控制一下高度和overflow,你看代码吧~<div style="height:250px;overflow-y:scroll;overflow-x:hidden;"></div>中就可以了~

  3. 这个效果在 Gecko 的浏览器下面可以看到,我试了 1.5 和 1.8

    此外,在 Opera 下你的 overflow-y:scroll 一直没有效果,不知道是不是个案

  4. opera没办法,他不支持这个属性……浏览器我还是尽量IE为主,FF为辅,OPERA无视中……

  5. 我的博客是Movable Type的,使用该代码后页面打开加载明显变慢,而且怎么在IE下不是加载的效果,是百合窗效果,在Firefox和Safari下是加载效果?

    引用来自 s5s5 s5s5 于 2008-10-17 10:19 PM 回复
    可能是和你的代码有冲突吧。。。我也搞不清楚了。。。

评论已关闭。