Comment puis-je déclencher des fonctions une fois qu'une image a été chargée avec jQuery?

Question

J'écris un simple script de remplacement d'image sur un site sur lequel je travaille et qui a un peu de mal.

Le code que j'ai en ce moment consiste à:

$(function() { 

    // When a thumbnail is clicked 
    $(".zoom_thumbs a").click(function() { 

    // Get large image attributes 
    var largeImg = $(this).attr("href"); 
    var largeTitle = $(this).children("img").attr("title"); 
    var zoomImage = $(".zoom_cnt .zoom img"); 

    //Change the attributes of the large image 
    $(zoomImage).attr({ src: largeImg, alt: largeTitle, title: largeTitle }); 

    // Once the attributes have been changed, 
    // reposition the div containing the image to center it 
    var wideWidth = $("#wide").width(); 
    var imageWidth = $(".zoom_cnt").width(); 
    var marginLeft = (wideWidth - imageWidth)/2; 
    var wideHeight = $("#content").height(); 
    var imageHeight = $(".zoom_cnt").height(); 
    var marginTop = (wideHeight - imageHeight)/2; 
    $(".zoom_cnt").css("left", marginLeft); 
    $(".zoom_cnt").css("top", marginTop); 

    return false; 
    }); 
}); 

J'ai mis dans certains commentaires pour vous montrer ce que je fais à chaque étape et ce que je veux atteindre. Mon problème est que je veux que le repositionnement de la div contenant l'image se produise après que les attributs d'image ont été changés. Pour le moment, ce n'est pas le cas sauf si je clique à nouveau sur la vignette (je suppose que c'est parce que l'image a déjà été chargée et dans le cache?). Est ce que j'essaye de faire réalisable?

Toute aide serait grandement apprécié :)

P.S Je suis conscient qu'une fois cela fait les images vont être sautant, mais je vais faire des effets cacher/montrer les fois que cela a été corrigé.

Answer 1

Vous voulez utiliser l'événement load pour l'image pour déclencher l'exécution du code qui dépend des attributs chargés:

//Change the attributes of the large image 
$(zoomImage) 
    .load(function() 
    { 
    // Once the attributes have been changed, 
    // reposition the div containing the image to center it 
    var wideWidth = $("#wide").width(); 
    var imageWidth = $(".zoom_cnt").width(); 
    var marginLeft = (wideWidth - imageWidth)/2; 
    var wideHeight = $("#content").height(); 
    var imageHeight = $(".zoom_cnt").height(); 
    var marginTop = (wideHeight - imageHeight)/2; 
    $(".zoom_cnt").css("left", marginLeft); 
    $(".zoom_cnt").css("top", marginTop); 
    }) 
    .attr({ src: largeImg, alt: largeTitle, title: largeTitle }); 

Il pourrait bien y avoir un moyen de le faire en utilisant le CSS pur aussi bien, mais puisque vous n'avez pas précisé la structure du balisage avec lequel vous travaillez, je ne peux pas vraiment spéculer là-dessus.