jQueryの.load（関数）と.addClassはPreloaderを削除するために動作しません。

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となります。

だからあなたのコードでは、そのような何かに見えることがあります。あなたが完全にロードするようにWebページを待っている場合は、

// 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" />

Answer 2

You can use the $(document).ready(function(){ // code }); 

を。