Effectuer une action après que l'événement de chargement est terminé

Question

J'ai quelques jQuery pour faire un div 'flash', mais je veux que cela se produise seulement après que la page ait été chargée dans la div, plutôt que instantanément.

$('#div').load("page.php"); 
$('#div').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100); 

Existe-t-il un moyen simple de faire cela?

Answer 1

Vous pouvez utiliser le paramètre de rappel load() pour fournir une fonction qui sera exécutée une fois la requête AJAX terminée. Essayez ceci:

$('#div').load("page.php", function() { 
    $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100); 
}); 

Vous devriez noter cependant que vous pouvez obtenir l'effet clignotant avec CSS seul. Cela rendra le JS plus succinct, et aussi de meilleures performances:

// place this within the callback function 
 
$('#div').addClass('blink_me');

.blink_me { animation: blinker .5s linear 3; } 
 
@keyframes blinker { 50% { opacity: 0; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"> 
 
    <span>Some content added by load()</span> 
 
</div>

Answer 2

load() a un rappel et vous devriez l'utiliser. Il est exécuté uniquement après la fin du load(). Parfait pour ce que vous recherchez:

$('#div').load("page.php", function() { 
    $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100); 
});