javascript - jQuery .load(function) 和 .addClass 以删除预加载器不起作用

Question

我目前正在使用 jQuery“addClass”和“removeClass”来删除预加载器。我希望在加载所有 Web 内容后删除预加载器页面。设置超时功能似乎工作正常，但当整个站点完成加载时，我似乎无法像实时加载那样做同样的事情。非常感谢一些帮助。

//..HTML..//

<div class="loader-wrapper">
</div>

//..CSS..//

.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.loaded .loader-wrapper {
-webkit-transform: translateY(120%);
-ms-transform: translateY(120%);
transform: translateY(120%);
-webkit-transition: all 1s 0.5s ease-out;
transition: all 1s 0.5s ease-out;
}

//..jQuery..//

<script>
  $("body").removeClass('loaded');
</script>

<script>
$( window ).load(function() {
 $("body").addClass('loaded');
});
</script>


//..For reference this works perfectly..//

<script>
$(document).ready(function() {

setTimeout(function() {
$("body").addClass('loaded');
}, 1800)

});
</script>

Answer 1

您可以使用一个库，它会在加载所有图像时进行验证。例如imagesLoaded .

所以你的代码可能看起来像这样:

// DOM is ready
$(function() {
    // We have to make sure that all of the images are loaded in the container
    $('body').imagesLoaded( function() {
        // Images are loaded
        $('.loader').hide();
        $('img').show();
    });
});

img {
    display: none
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>

<span class='loader'>Loading ...</span>
<img width="200" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />