SORU
4 Mayıs 2009, PAZARTESİ


Tarayıcı-bağımsız resim yüklendi algılamaya yol

YANİ, onreadystatechange. Yüklendiğinde var ama scary things okudum. jQuery Yukarı DOM load olayı oldukça güzel". hazır sarar Büyük olasılıkla sadece resim yükleme başka bir güzel kitaplık uygulanması haberim yok gibi görünüyor.

İçerik görüntüleri indirmek biraz zaman alabilir dinamik (server geri) üreten olmam. YANİ sadece benim kod ımg elemanının src, onreadystatechange olay "" durumu, kullanıcının bunu görebilmesi için DOM ekleyin. tam ile ateş ettikten sonra kurdum

Bir "" JavaScript çözüm, ya da iş. bir kitaplığı için bir işaretçi yerli ile mutlu olurdum Orada çok kütüphaneler var ve bu doğru bana sadece bilmeden bir durumdur eminim. Bu, sadece bu işlev için çok büyük bir kütüphane eklemek için istekli değilim zaten jQuery kullanıcıları ediyoruz, " dedi.

CEVAP
10 HAZİRAN 2010, PERŞEMBE


Bu partiye biraz geç kaldım, belki de bu cevabı bir başkası yardımcı olur

Eğer bir WordPress kullanmak hissesi olay işleyicileri (onmouseover özelliği//vb.) rahatsız etme kullanıyorsanız, aslında tamamen onları kullanarak durdurmak. Olayı kendi içinde API sağladılar yöntemleri kullanın.


Bu resim yükleme olayı görüntüyü belleğe yüklendiği zaman tetiklenir çünkü vücut eklenir, önce uyarı, olacak. Sana söylersem yapıyor: test.jpg yükler bir uyarı yapmak, vücut. eklemek o zaman test.jpg, src ile resim oluşturma

var img = $('<img src="test.jpg" />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);

Bu uyarı, sonra resim eklenir vücut, yine ne söyledin ona oluşturun: bir görüntü, bir olay (src ayarlayın, öyle değil mi dolu), ekleme görüntü için vücut hala src), şimdi set src... şimdi görüntü yüklü yani olay tetiklenir.

var img = $('<img />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');

Tabii ki de bir hata işleyicisi ekleyin ve olayları bağlama kullanarak bir sürü birleştirebilirsiniz().

var img = $('<img />');
img.bind({
    load: function() {
        alert('Image loaded.');
    },
    error: function() {
        alert('Error thrown, image didn\'t load, probably a 404.');
    }
});
$('body').append(img);
img.attr('src','test.jpg');

@Tarafından istek başına ... ChrisKempen

Burada ise görüntüler DOM yüklendikten sonra kırık olup olmadığını belirleme olmayan olay güdümlü bir şekilde. Bu kod naturalWidth, naturalHeight ve tam öznitelikleri kullanan StereoChrome tarafından bir makale eğer görüntü olup olmadığını belirlemek için bir kod, bir türevidir.

$('img').each(function() {
    if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
        alert('broken image');
    }
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • DrePwn

    DrePwn

    22 Temmuz 2011
  • InfoPuppet

    InfoPuppet

    15 Kasım 2011
  • MaximumPCMag

    MaximumPCMag

    23 Temmuz 2010