JQuery'de bir resmin yüklü veya önbelleğe alınmış olup olmadığını nasıl anlarsınız?

Question

Görüntü daha önce önbelleğe alınmışsa .load() işlevi çalışmaz gibi görünüyor. bir JQuery yükleme sırasını nasıl sağlar olmasi çok

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

: Eğer yük ve başka (yani Büyüteç) göstermeden önce bir resim yükledi emin olmak Yani eğer böyle bir şey yapamaz?

Answer 1

Yapmanız gereken şey, yük bağlamalarınızı seçici olarak kullanmaktır. Image object özelliği complete'u sınayarak yükü doğrulayabilirsiniz. Örneğin

: Yukarıda, (tek başına) this jQuery tarafından sağlanan görüntü nesnesi DOM referans belirtir

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

not edin.

Answer 2

Teşekkür Sparkey,

Bunu bir deneyin vereceğiz ama iyi görünüyor. görünüyor http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

şöyle sorunu çözmek için:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

burada "jQuery'nin 'onImagesLoad' Eklentisi'ne" beni neden http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

: Burada konu hakkında kapsamlı bir tartışma bulundu Söylediklerine göre hemen hemen kaybolan, sadece tamamlanmış kontrolü de "undefined" için test ediyor.

Answer 3

Bir jQuery uzantısı yönteminde tüm bu işlevselliği sarmak istiyorsanız, bu (görüntülerin herhangi bir sayı bekliyor çalışması gerekir ki) deneyin:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

: o zaman

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

ve basitçe böyle kullanmak

Answer 4

Görüntünün yüklü olup olmadığını algılamak için görüntünün genişliğinin veya yüksekliğinin olup olmadığını da kontrol edebilirsiniz.

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}