effet déclencheur après avoir changé l'attribut src de la balise img

Question

Im en utilisant ce code pour modifier l'attribut src d'une balise d'image (en utilisant un prototype et scriptaculous):

new Effect.Fade("images",{afterFinish: 
function() 
{ 
    $("detail").setAttribute("src", "img/02.jpg"); 
    new Effect.Appear("images",{duration:0.8}); 
} 
}); 

Où "images" est le conteneur (un div) et "detail" est la balise img Le résultat est l'image actuelle s'estompe, apparaît, puis la nouvelle image apparaît soudainement. Ma question est, comment puis-je vérifier la nouvelle image est entièrement chargée par le navigateur pour déclencher le Effect.Appear après? Existe-t-il un autre moyen de le faire?

Answer 1

Les images ont un événement onload vous pouvez brancher jusqu'à:

$("detail").onload = function() 
{ do_stuff(); } // Remember to do this BEFORE changing the src 

Dans mon expérience, il est un peu squameuse parfois (parfois ne semble pas s'exécuter). Il serait préférable de précharger l'image et d'autoriser cet effet uniquement après le chargement du document complet (onload au lieu de dom:load ou ready).

Answer 2

Remplacer

new Effect.Appear("images",{duration:0.8}); 

avec

Event.observe("detail", 'load', function() { 
    new Effect.Appear("images",{duration:0.8}); 
    Event.stopObserving('detail', 'load'); 
}); 

Pour indiquer à l'utilisateur que vous chargez l'image, vous pouvez définir un arrière-plan css à l'image, avec un cercle spinnging ou tout ce qui convient.