1.首先需要做一张GIF的加载动画,一般网上都可以找到一些loading的gif,不过如果你想做的更个性一点的话,就自己用flash做一个动画,导出成gif格式就可以了,具体可以参考。
2.在BODY后面写加载动画的DIV容器,参考如下:
<body> | |
<divclass=”page_spinner“></div> |
3.加载动画的CSS设置,主要要设置动画加载层的z-index大一些,盖住其他元素。如下:
.page_spinner { position:fixed; background: url(../images/main_spinnerr.gif) 50% 50% no-repeat #fff; z-index:9999; width:100%; height:100%; top:0; left:0}4.在页面的最后位置,加载事件中写入执行语句。(主要是将加载动画慢慢隐藏掉,然后设置body的overflow为默认值)
<script> | |
$(window).load(function(){$(‘.page_spinner’).fadeOut(1000);$(‘body’).css({overflow:’visible’})}) | |
</script> |