Ładowanie obrazów dla obrazów statycznych

Question

Wiem, że aby załadować obraz, należy ustawić src po podłączeniu modułu obsługi ładowania. Jednak chcę dołączyć procedury obsługi ładunków do obrazów, które są statyczne w moim kodzie HTML. Teraz to zrobić w następujący sposób (za pomocą jQquery):

<img id='img1' src='picture.jpg'> 

$('#img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('img1').attr('src')); 

Ale to raczej brzydki i ma oczywiste przepływ że można to zrobić tylko dla selektorów pasujących tylko jeden obraz. Czy jest jakiś inny, lepszy sposób na zrobienie tego?

edit
Co mam na myśli, że można to zrobić tylko dla selektora który odnosi się tylko jeden obraz jest to, że gdy w ten sposób:

<img class='img1' src='picture.jpg'> 
<img class='img1' src='picture2.jpg'> 

$('.img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('.img1').attr('src')); 

że oba obrazy będą ma src = 'picture.jpg'

Answer 1

można wywołać zdarzenie (lub jego obsługi) bezpośrednio lub poprzez wywołanie .trigger().load().

Jeśli wiesz, że chcesz to wydarzenie, bo wiesz, że obrazy są już załadowane, możesz zrobić to tak:

$('#img1').load(function() { 
    alert('foo'); 
    }) 
    .trigger('load'); // fires the load event on the image 

Jeśli używasz skryptu na dokumencie gotowy lub jakąś chwilę gdzie nie jest jeszcze jasne, czy obrazy są tam czy nie, to chciałbym użyć czegoś takiego:

$('img.static') 
    .load(function(){ 
    alert('foo'); 
    return false; // cancel event bubble 
    }) 
    .each(function(){ 
    // trigger events for images that have loaded, 
    // other images will trigger the event once they load 
    if (this.complete && this.naturalWidth !== 0) { 
     $(this).trigger('load'); 
    } 
    }); 

Ostrzegamy, że pęcherzyki zdarzeń obciążenia (jQuery 1.3) i ty może ewentualnie być wyzwolenie obsługi obciążenia na dokumencie przedwcześnie, jeśli nie anulujesz bańki w img handler.

Dla przypomnienia: Rozwiązanie wyzwalające img.src=img.src nie będzie działać nieprawidłowo w Safari. Będziesz musiał ustawić src na coś innego (np. # Lub o: puste), a następnie wrócić do przeładowania.

Answer 2

Domyślam się, że to naprawdę pytanie o selektor jQuery s. Jeśli chcesz dopasować wszystkie elementy obrazu, możesz użyć img zamiast #img1 jako selektora.

Answer 3

Dodaj klasę do obrazów, w których ta funkcja ma być używana, i użyj tej klasy w selektorze jQuery.

$('.static-image').load(function(){ ... }); 

Answer 4

Ok, zwróciłem Borgars odpowiedzieć na wtyczki, to jest tutaj:

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
}