<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{ margin:0; padding:0;}
html{ font-size:15.625vw;}
html,body{ width:100%; height:100%;}
body{ font-size:0.30rem; font-family:"微软雅黑"; text-align:center; color:#fff;}
.main{ overflow:hidden;}
.main, .swiper-wrapper, .swiper-slide{ width:100%; height:100%;}
.item-01{ background-color:#f00;}
.item-02{ background-color:#ff0;}
.item-03{ background-color:#f0f;}
.item-04{ background-color:#0074db;}
.loading{ width:100%; height:100%;}
.circle{ position:absolute; left:50%; top:50%; margin-left:-1.00rem; margin-top:-1.00rem; width:2.00rem; height:2.00rem; border-radius:50%;}
.circle-01{ background-color:#fff; animation:scale 1s ease-in-out infinite;}
.circle-02{ background-color:#eee; animation:re-scale 1s ease-in-out infinite;}
@keyframes scale{
0%{ transform:scale(1,1);}
50%{ transform:scale(0,0);}
100%{ transform:scale(1,1);}
}
@keyframes re-scale{
0%{ transform:scale(0,0);}
50%{ transform:scale(1,1);}
100%{ transform:scale(0,0);}
}
</style>
</head>
<body>
<p class="main swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide item-01">
<p class="loading">
<span class="circle circle-01"></span>
<span class="circle circle-02"></span>
</p>
</p>
<p class="swiper-slide item-02">2</p>
<p class="swiper-slide item-03">3</p>
<p class="swiper-slide item-04">4</p>
</p>
</p>
<script src="jquery-2.1.4.min.js"></script>
<script src="swiper.jquery.js"></script>
<script>
if(document.readyState === 'complete'){
$('.loading').fadeOut(100);
}
/*var timer = setTimeout(function (){
$('.loading').fadeOut(100);
clearTimeout(timer);
timer = null;
}, 3000);*/
mySwiper = new Swiper('.swiper-container', {
direction:"vertical"
});
</script>
</body>
</html>以下程式碼無法正常執行，是什麼問題？
if(document.readyState === 'complete'){
$('.loading').fadeOut(100);
}
頁面載入完畢後執行
你直接寫在script下面 此時的readyState會是loading而不是complete。除非你寫在onload裡面才會是complete