一点背景。
目前，我有一个预加载屏幕，该屏幕会在页面加载一段时间之前显示。我想要的是能够检测是否加载了多个元素，然后结束预加载屏幕，而不是为预加载屏幕设置一个结束时间。
在我的 fiddle 中，我想检测图像是否已经完全渲染和加载，然后结束屏幕，我还想了解并知道如何对任何其他元素(例如随机 div 或段落)执行此操作如果可能的话。
fiddle : https://jsfiddle.net/jzhang172/Lyv17L0n/1/
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 500);
});.loaded{
transition:1s;
}
.content{
background:gray;
height:500px;
width:100%;
}
#loader-wrapper{
position:fixed;
background:black;
top:0;
bottom:0;
left:0;
right:0;
transition:1s;
}
.loaded #loader-wrapper{
opacity:0;
}
.loader-section{
position:fixed;
top:0;
bottom:0;
background:red;
z-index:5;
width:51%;
transition:1s;
opacity:1;
}
.section-left{
left:0;
}
.section-right{
right:0;
}
.loaded .loader-section.section-left{
opacity:0;
transform:translateX(-100%);
transition:1s;
}
.loaded .loader-section.section-right{
opacity:0;
transform:translateX(100%);
transition:1s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
</div>
</body>最佳答案
您可以使用这个插件:https://rawgit.com/alexanderdickson/waitForImages/master/dist/jquery.waitforimages.js
$('body').waitForImages(
function() {
...CODE FOR EACH LOAD...
}, function(loaded, total) {
if(loaded / total == 1){
...CODE FOR FULLY LOAD...
}
});
您可以修改该插件以获取 div 和 txt。但大多数图像是需要时间加载的图像。
你可以检查这个插件是否正常工作:
关于Javascript:播放预加载屏幕直到加载特定内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35837109/