2011-09-16 20 views
14

Zmieniam img src po wczytaniu pliku json, wszystko działa dobrze. Ale chcę się upewnić, że obraz jest całkowicie załadowany. Które można zrobić przy użyciu:wywołanie zwrotne jQuery przy ładowaniu obrazu podczas zmiany src

 .one("load",function(){ 
       alert("image has load yay"); 
      }); 

Ale po przeczytaniu różne stanowiska, że ​​nie wszystkie przeglądarki pożaru obciążenie, jeżeli obraz jest w pamięci podręcznej. Wydaje mi się, że nie dostaję tego problemu w przeglądarce, która ma spowodować ten problem. Ale testowałem tylko FF (6.0.2), Chrome (13.0.7) i Safari (5.0.5) na Macu. Teraz jestem pewien, że IE musi mieć problem i jest to tylko związane z komputerem. Używam całkiem nowych wersji przeglądarek, więc coś się w nich zmieniło, aby załadować ogień. Albo moja druga myśl, że używam najnowszej wersji jquery (1.6.3). Zmieniono .load?

Mam nadzieję, że to wszystko ma związek z uruchomieniem najnowszego jquery, ale jeśli nie jest i jest to starszy problem z przeglądarką, muszę wprowadzić poprawkę. Próbowałem parę rozwiązania w tym miejscu na przykład: jQuery loading images with complete callback a także niektóre z komentarzy na stronie .load API: http://api.jquery.com/load-event/#comment-30211903

Ale nie wydaje się uzyskać je do pracy. Pierwszy nie działa w ogóle, a drugi wydaje się przewracać z .each().

To jest dotychczasowy kod, który wydaje się działać poprawnie, ale nie mogę być pewny, jak może starsze problemy z przeglądarką.

$.getJSON(jsonURL, function(json) {   
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
     alert("the image has loaded"); 
    //do something here 
    }); 
$("a.imgZoom").attr("href", json[imageID].largeImage); 
}) 

Z góry dziękuję za pomoc.

B

Odpowiedz

34

podstawie pewnego badania robiłam około rok temu, nie znalazłem niezawodny sposób, aby uzyskać zdarzenia ładowania przy zmianie .src obrazu z jednej wartości do drugiej. W związku z tym musiałem uciekać się do ładowania nowego obrazu i zastępowania tego, który miałem nowy, po załadowaniu nowego obrazu. Kod ten działa z powodzeniem w kilkuset witrynach internetowych (jest używany przez pokaz slajdów) od około roku, więc wiem, że to działa.

Jeśli ustawisz nośnik ładunku PRZED ustawieniem właściwości .src na nowym obrazie, niezawodnie otrzymasz zdarzenie ładowania. Oto kod, który napisałem dzisiaj wcześniej, do przechwytywania zdarzenia obciążenia: jQuery: How to check when all images in an array are loaded?.

ten kod, który przywiązuje obsługi zdarzeń PRZED ustawieniach .src działa na mnie w nowoczesnych przeglądarkach próbowałem go (nie testowałem starszych przeglądarek):

$("img").one("load", function() { 
     // image loaded here 
    }).attr("src", url); 

Można go zobaczyć pracuj tutaj: http://jsfiddle.net/jfriend00/hmP5M/ i możesz przetestować dowolne przeglądarki, które chcesz użyć, używając jsFiddle. Wystarczy kliknąć obraz, aby załadować nowy obraz. Przechodzi przez trzy różne obrazy (ustawiając .src za każdym razem), ładując dwa z nich wyjątkowo za każdym razem (nigdy z pamięci podręcznej) i jeden z pamięci podręcznej, aby przetestować oba przypadki. Wywołuje komunikat do ekranu za każdym razem, gdy wywoływany jest program obsługi .load, dzięki czemu można sprawdzić, czy jest on wywoływany.

+0

Dzięki za odpowiedź, nie przepadam za 100% pewności, jak mogę to nazwać wcześniej. Patrzenie na twój przykład też nie pomogło :( – Ben

+0

Dodałem przykład do mojej odpowiedzi, która wydaje się działać – jfriend00

+0

Dzięki jfriend00, dostałem to działa.Nie oczywiście nie jestem pewien, czy to naprawienie ewentualnych problemów z .load jak mój wersja działa, ale wezmę na to twoje słowo. – Ben

Powiązane problemy