一.普通頁面實現(xiàn)
jquery給出了兩個函數(shù)來判斷這兩個節(jié)點寂诱，
判斷DOM元素加載完成拂苹，還是頁面中的所有關(guān)聯(lián)文件（包括圖片）
$(document).ready()是在頁面上所有DOM元素加載完畢后才執(zhí)行。
$(window).load();方法是在網(wǎng)頁中所有的元素（包括元素的關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行痰洒。
//此處選用load方法
$(window).load(function(){
//關(guān)閉loading
});
二. ajax請求loading效果實現(xiàn)實例：
在頁面初始化的時候醋寝，在頁面<body>標簽的頂部來添加loading層并禁止頁面滾動,請求結(jié)束后移除loading加載dom元素啟用頁面滾動。
//依賴jquery
$(document).ajaxStart(function () {
let str = `
<div id="loadingBox" tabindex="-1">
<div class="loading">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
<p class="loading-text">正在加載...</p>
</div>
</div>
`;
$('body *:first').before(str);
//禁止頁面滾動
$('body').css({ 'position': 'fixed', "width": "100%" });
}).ajaxStop(function () {
$('#loadingBox').remove();
//開啟頁面滾動
$("body").css({ "position": "initial", "height": "auto" });
})
css代碼如下：
#loadingBox {
position: fixed;
top:0;
left:0;
right: 0;
bottom: 0;
z-index: 500;
background-color: rgba(0, 0, 0, 0.75);
.loading{
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
.loading-text{
color: #FFF;
padding: 10px 0;
}
}
.pswp__preloader__icn {
margin: 0 auto;
width : 24px;
height : 24px;
-webkit-animation: clockwise 500ms linear infinite;
animation : clockwise 500ms linear infinite;
}
.pswp__preloader__cut {
position: relative;
width : 12px;
height : 24px;
overflow: hidden;
position: absolute;
top : 0;
left : 0;
}
.pswp__preloader__donut {
box-sizing : border-box;
width : 24px;
height : 24px;
border : 2px solid #FFF;
border-radius : 50%;
border-left-color : transparent;
border-bottom-color: transparent;
position : absolute;
top : 0;
left : 0;
background : none;
margin : 0;
-webkit-animation : donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
animation : donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0)
}
}
@keyframes donut-rotate {
0% {
transform: rotate(0)
}
50% {
transform: rotate(-140deg)
}
100% {
transform: rotate(0)
}
}
}
