jQuery .load (function) 및 .addClass가 Preloader를 제거하기 위해 작동하지 않습니다.

Question

현재 jQuery "addClass"및 "removeClass"를 사용하여 프리 로더를 제거하고 있습니다. 모든 웹 콘텐츠가로드 될 때 프리 로더 페이지를 제거하고 싶습니다. 시간 초과 기능을 설정하는 것은 정상적으로 작동하는 것처럼 보이지만 실시간 로딩과 같이 전체 사이트로드가 완료되면 동일한 작업을 수행 할 수없는 것처럼 보입니다. 어떤 도움을 주시면 감사하겠습니다.

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

Answer 2

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

를 완전히로드 웹 페이지를 대기하는 경우.