Comment faire loader attendre divs spécifiques

Question

J'ai utilisé ce petit truc (code) pour les animations loader sur mes sites et j'aimerais savoir s'il est possible de ne faire attendre que quelques éléments div spécifiques si le fondu disparaît . Maintenant, il attend que tout le site se charge avant de le montrer mais je voudrais le faire attendre que les divs visibles sur le dessus du site pour le rendre plus rapide.

$(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

Vous pouvez utiliser jquery charge événement sur certains div au lieu de l'appeler sur la fenêtre entière:

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

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

Answer 2

Check this out Snippet

$("#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

Est-il beaucoup de sens d'avoir une icône de chargement et le retirer avant que la page est effectivement chargée? Pour l'utilisateur, cela donne une fausse impression que la page est prête pendant son chargement. Je ne pense pas que ce soit souhaitable. En guise de compromis, je suggère la méthode .ready() de jQuery pour retirer le chargeur. Le gestionnaire est exécuté dès que le DOM est prêt mais avant que d'autres éléments tels que des images ne soient chargés. 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

En utilisant setInterval vous pouvez vérifier disons que toutes les 200 ms si l'élément a été ajouté au DOM. Une fois est vous être ajouté peut alors effacer le contrôle à l'aide clearInterval():

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