对于我当前正在从事的项目,有一个HTML / jQuery加载屏幕,带有无休止的滚动字幕动画,它使用setInterval()
每隔250ms重复添加“正在加载”一词。
此刻,我正试图让span
停止使用clearInterval()
的间隔添加,因为页面已完全加载,并且出于性能原因,加载屏幕消失了;但是,我无法使代码正常工作。
HTML:
<div id="loading">
<div class="loader"><span>LOADING LOADING </span></div>
</div>
CSS:
#loading {
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
z-index: 1000;
background: #fff;
}
#loading .loader {
display:inline-block;
padding: 16px;
font-weight:bold;
font-size: 2em;
background: #200f9d url(images/bg_portfolio.png);
background-size: 500px;
margin: 0 auto;
color:#fff;
line-height: 1;
overflow:hidden;
white-space: nowrap;
width:0;
opacity: 0;
}
#loading .loader span {
animation: loading 50s linear infinite;
display: block;
}
@keyframes loading {
from { transform: translateX(0%); }
to { transform: translateX(-5000%); }
}
JS:
var loadingText = $("#loading .loader span").text();
var loaderInterval;
$("#loading .loader").imagesLoaded( { background: true }, function() {
$("#loading .loader").animate({ opacity: 1, width: 200 }, 500 );
var loaderInterval = setInterval(function() {
$("#loading .loader span").append(loadingText); }, 250);
}); // appends two more "Loading"s in all-caps every 250ms
$(window).on("load", function(){
$("#loading").delay(1000).fadeOut(function() {
clearInterval(loaderInterval);
// supposedly stops appending when div#loading fades out
});
[...]
});