【发布时间】:2018-11-07 22:37:26
【问题描述】:
我正在尝试在页面加载后停止预加载器。
假设我们使用下面的预加载器。
CSS:
body {
background: #eaecfa;
}
.loader {
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
color: #ce4233;
letter-spacing: 0.2em;
}
.loader::before, .loader::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: #ce4233;
position: absolute;
-webkit-animation: load .7s infinite alternate ease-in-out;
animation: load .7s infinite alternate ease-in-out;
}
.loader::before {
top: 0;
}
.loader::after {
bottom: 0;
}
@-webkit-keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}
@keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}
HTML:
<div class="loader">Loading...</div>
为什么下面的 JS 代码会起作用,即我收到警报:
$(document).ready(function(){
$(window).load(function(){
alert("This can run");
});
})
同样的代码改变了行并不会停止预加载器?
$(document).ready(function(){
$(window).load(function(){
$("loader").remove();
});
})
我是 Web 开发的完全新手,但是在这里尝试了许多其他答案,但我无法让它们中的任何一个起作用。
【问题讨论】:
标签: javascript html css preloader