Question

一点背景。
目前，我有一个预加载屏幕，在页面加载一段时间之前显示。我想要的是能够检测是否加载了多个元素然后结束预加载屏幕而不是设置预加载屏幕的时间结束。

在我的小提琴中，我想检测图像是否已完全渲染并加载然后结束屏幕，我还想了解并知道如何为任何其他元素执行此操作，例如随机div或段落如果可能的话。

小提琴： 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>

Answer 1

您可以使用此插件：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。但大多数图像是需要时间加载的图像。

你可以检查这个插件是否正常工作：

http://jsfiddle.net/2sc0rtzL/

Answer 2

我试图在window.load中调用您的代码，希望这对您有用。

window.load函数检查页面中的每个资源是否已加载而不是执行。

https://jsfiddle.net/meg5vqg5/

Javascript：播放预加载屏幕，直到加载特定内容

2 个答案: