Statik imajlar için imajin yükü

Question

Yüklemeli görüntü için, yükleyici yüklendikten sonra src'yi ayarlamanız gerektiğini biliyorum. Ancak, HTML'mde statik olan görüntülere yükleyicileri eklemek istiyorum.

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

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

Ama bu oldukça çirkin ve sadece tek maç seçiciler için yapılabilir bariz bir akış vardır: Şu anda aşağıdaki şekilde (jQquery kullanarak) bunu görüntüsü. Bunu yapmanın başka bir yolu var mı?

düzenlemek
Ben sadece tek bir görüntü Bunu yaparken olmasıdır maç seçicinin için yapılabilir bununla ne kast:

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

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

Yani her iki görüntüleri olacak src = 'resim.jpg'

Answer 1

doğrudan .trigger() veya .load() arayarak (veya işleyici var) olayı tetikleyebilir. Eğer görüntüler zaten yüklenmiş olduğunu biliyorum çünkü, olay istediğinizi biliyorsanız

, o zaman böyle yapabilirsiniz:

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

Hazır ya da bazı anı belge üzerinde Senaryonu çalıştırıyorsanız görüntü var ya da yok ise henüz belli değil, bunlara böyle bir şey kullanırsınız:

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

yük olay kabarcıklar (jQuery 1.3) ve muhtemelen bir yük işleyicisi tetikleme konusunda da uyardı Be Eğer balonun içinde iptal etmiyorsanız img işleyicisi.

Kayıt için: img.src=img.src tetikleme çözümü maalesef Safari'de düzgün çalışmayacaktır. src'u başka bir şeye (# veya yaklaşık: boş) ayarlamanız ve yeniden yüklenmek için geri dönmeniz gerekecektir.

Answer 2

Bu jQuery seçici hakkında gerçekten bir soru sanırım s. Tüm görüntü öğelerinizi eşleştirmek isterseniz, #img1 yerine img seçeneğini seçiciniz olarak kullanabilirsiniz.

Answer 3

Bu işlevin olmasını istediğiniz görüntülere bir sınıf ekleyin ve jQuery seçicisinde bu sınıfı kullanın.

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

Answer 4

Tamam, Borgars bir eklenti haline cevap döndü, işte burada:

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