有人可以告訴我為什么在頁面加載并指定添加時間后預加載器 div 不會消失。它曾經可以作業，現在它不在新站點上......我想我在新站點上使用它時可能錯過了一些東西。
它只是顯示 div 并永遠停留在該螢屏上。
$('body').append('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2750); //wait for page load PLUS x.
});
function removeLoader(){
//fadeUp.play();
$( "#loading-container" ).fadeOut(250, function() {
// fadeOut complete. Remove the loading div
$( "#loading-container" ).remove(); //makes page more lightweight
});
}/* LOADER */
#loading-container {
position:fixed;
top:0;
left:0;
display: flex;
justify-content: flex-end;
width:100%;
height:100vh;
background-color: #131313;
z-index: 20;
}
#loading-inner {
display: flex;
align-self: center;
flex-direction: row;
}
#percent {
color: white;
font-size: 30px;
margin-right: 30px;
font-family: canela
}
#bar {
width: 200px;
background-color: #424242;
height: 1px;
align-self: center;
}
#bar-percent {
height: 1px;
width: 1%;
background-color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>uj5u.com熱心網友回復：
試試下面的代碼。我將 html 字串與 loader 變數中的 jquery 物件一起保存。現在它不依賴于id。
var loader = $('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>')
$('body').append(loader);
$(window).on('load', function(){
setTimeout(removeLoader, 2750); //wait for page load PLUS x.
});
function removeLoader(){
//fadeUp.play();
loader.fadeOut(250, function() {
// fadeOut complete. Remove the loading div
loader.remove(); //makes page more lightweight
});
}
uj5u.com熱心網友回復：
這對我來說很有用。
如果它在您的站點中不起作用，請查看控制臺是否有任何錯誤，因為它可能是由在加載器 div 消失之前停止執行代碼的任何其他代碼引起的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/472729.html
標籤：javascript jQuery