網頁頁面預載入動畫的實現,載入後隱藏
阿新 • • 發佈:2018-11-10
我們做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