<!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>The following code cannot be executed normally. What is the problem?
if(document.readyState === 'complete'){
$('.loading').fadeOut(100);
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Executed after the page is loaded
You write it directly under the script. The readyState at this time will be loading instead of complete. Unless you write it in onload, it will be complete