1. 程式人生 > >網頁頁面預載入動畫的實現,載入後隱藏

網頁頁面預載入動畫的實現,載入後隱藏

我們做web app的時候,可以做一個頁面載入廣告,在你網頁載入的時候,先出現一段gif動圖或者是海報。
下面是實現頁面載入動畫的程式碼
首先js程式碼的實現

(function($){
    $(window).load(function(){
        $('#begin').fadeOut();
        $('#loading').delay(200).fadeOut('slow');
    });
 
	$(document).ready(function(){
	//code
	})
 
})(jQuery);

HTML載入層

 <!--載入動畫層-->
  <div id="loading">
    <div id="begin"></div>
  </div>

CSS程式碼實現


#loading{
    background:#ffffff;
    bottom:0;
    left:0;
    position: fixed;
    right:0;
    top:0;
    z-index:500;
}
 
#begin{
    background: url(../images/loading.gif)center center no-repeat; //這裡可以替換掉你需要載入的圖片
    height:200px;  //控制大小
    width:200px;   //控制大小
    left:50%;          //控制位置,可去掉
    top:50%;            //控制位置,可去掉
    margin: -100px 0 0 -100px;
    position: absolute;
}

引用入自己的網頁檔案,就能實現頁面預載入廣告介面了。

如:www.studiosworks.cn