Wie kann ich Funktionen auslösen, nachdem ein Bild mit jQuery geladen wurde?

Question

Ich schreibe ein einfaches Bildaustausch-Skript auf einer Website, an der ich gerade arbeite und habe ein paar Probleme.

Der Code, den ich im Moment besteht aus:

$(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; 
    }); 
}); 

ich in einigen Kommentaren gesetzt haben, Ihnen zu zeigen, was ich in jedem Schritt tue und was ich will, erreichen. Mein Problem ist, dass ich die Neupositionierung des div mit dem Bild nach dem Ändern der Bildattribute durchführen möchte. Im Moment funktioniert es nicht, es sei denn, ich klicke erneut auf das Thumbnail (ich nehme an, dass das Bild bereits geladen wurde und im Cache ist?). Was versuche ich zu erreichen?

Jede Hilfe wäre sehr dankbar :)

P. S Ich bin mir bewusst, dass, sobald dies geschehen ist die Bilder werden werden springen, aber ich werde tun hide/show Effekte, sobald dieses Problem behoben worden ist.

Answer 1

Sie wollen das load Ereignis für das Bild verwenden Ausführung des Codes ausgelöst, die auf den geladenen Attribute abhängig:

//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 }); 

Es könnte auch ein Weg sein, diese mit reinem CSS als auch zu tun, aber Da Sie die Struktur des Markups, mit dem Sie arbeiten, nicht angegeben haben, kann ich darüber nicht wirklich spekulieren.