精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

網絡建站知識

精準傳達 ? 價值共享

洞悉互聯網前沿資訊,探尋網站營銷規律

查看其它板塊

網頁預加載loading特效

作者:狐靈科技 | 2019-07-29 16:34 |點擊:

什么是預加載?


 WEB預加載就是在網頁全部加載之前,對一些主要內容進行加載,以提供給用戶更好的體驗,減少等待的時間。否則,如果一個頁面的內容過于龐大,沒有使用預加載技術的頁面就會長時間的展現為一片空白,直到所有內容加載完畢。
  圖片的預加載技術使用較為廣泛,一般的效果是網頁中的圖片由模糊變得清晰。


怎么做預加載loading特效


CSS代碼

.animationload {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff; /* change if the mask should have another color then white */
z-index: 999999; /* makes sure it stays on top */
}
.loader {
width: 200px;
text-indent: -99999;
height: 200px;
font-size: 0;
position: absolute;
left: 50%; /* centers the loading animation horizontally one the screen */
top: 50%; /* centers the loading animation vertically one the screen */
background-image: url(../images/loading.gif); /* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px; /* is width and height divided by two */
}
 

JS代碼:

// Page Preloader
$(window).load(function() {
$(".loader").delay(300).fadeOut();
$(".animationload").delay(600).fadeOut("slow");
});
 


HTML代碼:

<div class="animationload">
  <div class="loader">玩命加載中...</div>
</div>
自己把CSS代碼中的圖片路徑改成你自己的即可 一般把loading代碼放到網站的頭部

如果沒有loading素材 可以查看這篇文章:分享網站建設中loading GIF SVG PNG圖

如沒特殊注明,文章均為狐靈科技原創,轉載請注明?? "網頁預加載loading特效
多一份免費策劃方案,總有益處。

請直接添加技術總監微信聯系咨詢

網站設計 品牌營銷

多一份參考,總有益處

聯系狐靈科技,免費獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談,可以通過以下方式與我們聯系

業務熱線:15082661954 / 大客戶專線:15523356218