Как заставить загрузчика подождать конкретные divs

Question

Я использую эту маленькую вещь (код) для анимации загрузчика на своих сайтах, и я хотел бы знать, возможно ли дождаться только нескольких конкретных элементов div до того, как они исчезнут , Теперь он ждет, когда весь сайт загрузится, прежде чем показывать его, но я хотел бы заставить его ждать только divs, видимых поверх сайта, чтобы сделать его быстрее.

$(window).load(function() { 
    $('.loader').fadeOut(250); 
}) 

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

.loader { 
position:fixed; 
width:100%; 
height:100%; 
top:0px; 
left:0px; 
z-index:9999; 
background-color:#000; 
background-image: url(images/loader.gif); 
backgourd-repeat:no-repeat; 
background-postition:50% 50%; 
} 

Answer 1

Вы можете использовать JQuery нагрузки мероприятие по определенной DIV вместо того, чтобы называть его по всему окну:

$("#your-div").load(function() { 
 
    $('.loader').fadeOut(250); 
 
});

https://api.jquery.com/load-event/

Answer 2

проверить это Отрывок

$("#wait").ready(function(){ 
 
    $('.loder').fadeOut(250); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="wait"><p>this is a div</p></div> 
 

 
<div class="loder">Some Content</div>

Answer 3

ли это сделать много смысла иметь значок загрузки и удалить его, прежде чем на самом деле загрузки страницы? Для пользователя это создает неправильное впечатление о том, что страница готова, пока она еще загружается. Я не думаю, что это целесообразно. В качестве компромисса я предлагаю метод jQuery .ready() для удаления загрузчика. Обработчик выполняется, как только DOM готов, но до того, как будут загружены другие объекты, например изображения. http://api.jquery.com/ready/

$(function() { 
 
    // Handler for .ready() called. 
 
    $('.loader').remove(); 
 
});

.loader { 
 
position:fixed; 
 
width:100%; 
 
height:100%; 
 
top:0px; 
 
left:0px; 
 
z-index:9999; 
 
background-color:#000; 
 
background-image: url(images/loader.gif); 
 
backgourd-repeat:no-repeat; 
 
background-postition:50% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

Answer 4

Использование setInterval вы можете проверить, скажем, через каждые 200 мс, если элемент был добавлен в DOM. После того, как добавляется вас, то можно очистить проверку с помощью clearInterval():

var checkIfExists = setInterval(function() { 
    if ($('div').length) { 
    $('.loader').fadeOut(250); 
    clearInterval(checkIfExists); 
    } 
}, 200);