jQuery görüntü yüklemesinde geri arama (görüntü önbelleğe alınmış olsa bile)

Ben yapmak istiyorum:

$("img").bind('load', function() {
  // do stuff
});

Ancak görüntü önbellekten yüklendiğinde load olayı tetiklenmez. JQuery dokümanlar önermek bir eklentisi bu sorunu gidermek için, ama o işi yapmaz

Eğer srczaten ayarlanmışsa, olay işleyicisini bağlamadan önce olay önbelleğe alınmış durumda tetiklenir. Bunu düzeltmek için, şu şekilde etkinliğe dayalı olarak etkinliği kontrol etme ve tetikleme arasında geçiş yapabilirsiniz .complete:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

Dan değişikliği Not .bind()için .one()olay işleyicisi iki kez çalışmayacak şekilde.

DOM olmayan bir resim nesnesine yeniden yüklemenizi önerebilir miyim? Önbelleğe alınırsa, bu hiç zaman almaz ve yükleme yine de tetiklenir. Önbelleğe alınmazsa, görüntü yüklendiğinde, görüntünün DOM sürümünün yüklenmesi bittiğinde olması gereken yükleme yükünü tetikler.

JavaScript:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

Güncelleme (birden fazla görüntüyü işlemek ve doğru sıralı yükleme eki ile):

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

Benim basit çözümüm, herhangi bir harici eklentiye ihtiyaç duymuyor ve yaygın durumlar için yeterli olmalı:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

şöyle kullanın:

onImgLoad('img', function(){
    // do stuff
});

örneğin, yüklenen görüntülerinizde kaybolmak için şunları yapabilirsiniz:

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

Alternatif olarak, jquery eklentisi benzeri bir yaklaşımı tercih ederseniz:

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

ve bu şekilde kullanın:

$('img').imgLoad(function(){
    // do stuff
});

Örneğin:

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

Gerçekten jQuery ile yapmak zorunda mısın? onloadEtkinliği doğrudan resminize de ekleyebilirsiniz ;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Görüntü her yüklendiğinde, önbellekten ya da önlenmeden tetiklenir.

Bu kodu yükleme hatası desteğiyle de kullanabilirsiniz:

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

Bu sorunu kendim yaşadım, her yerde önbelleğimi öldürmeyi veya bir eklenti indirmeyi içermeyen bir çözüm aradım.

Ben hemen bu konu görmedim, bu yüzden ilginç bir düzeltme ve (sanırım) burada gönderme layık başka bir şey buldum:

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

Aslında bu fikri buradaki yorumlardan aldım: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

Neden çalıştığı hakkında hiçbir fikrim yok ama bunu IE7'de test ettim ve şimdi işe yaramadan önce nerede kırıldı.

Umarım yardımcı olur,

Düzenle

Kabul edilen cevap aslında nedenini açıklar:

Src zaten ayarlanmışsa, olay işleyicisini bağlamadan önce olay önbellek kasasında başlatılır.

Görüntünün src'si ile yeni bir görüntü oluşturmak için jQuery kullanarak ve yükleme yöntemini doğrudan buna atayarak, jQuery yeni görüntü oluşturmayı bitirdiğinde yükleme yöntemi başarıyla çağrılır. IE 8, 9 ve 10'da bu benim için çalışıyor

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

Https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 bulduğum bir çözüm (Bu kod doğrudan yorumdan alınmıştır)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

GUS örneğinde bir değişiklik:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

Yüklemeden önce ve sonra kaynağı ayarlayın.

İmg oject tanımlandıktan sonra src bağımsız değişkenini ayrı bir satıra yeniden ekleyin. Bu, lad-olayı tetiklemek için IE'yi kandırır. Bu çirkin ama şimdiye kadar bulduğum en basit çözüm.

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

Bunu yapmak isterseniz size küçük bir ipucu verebilirim:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

Tarayıcı resimleri önbelleğe aldığında bunu yaparsanız, her zaman gösterilen img sorun değil, gerçek resim altında img yükleniyor.

Ben e.target.width undefined olacağını IE ile bu sorunu vardı. Load olayı tetiklenirdi ancak IE'de (chrome + FF çalıştı) görüntünün boyutlarını alamadım.

E.currentTarget.naturalWidth & e.currentTarget.naturalHeight'ı aramanız gerektiği ortaya çıkıyor .

IE bir kez daha kendi (daha karmaşık) yolunu yapıyor.

Sorunları, görüntüleri tembel yüklemenize (sayfa performansını iyileştirmek) ve geri aramayı parametre olarak iletmenize izin veren JAIL eklentisini kullanarak çözebilirsiniz.

$('img').asynchImageLoader({callback : function(){...}});

HTML şöyle görünmelidir

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

Saf bir CSS çözümü istiyorsanız, bu hile çok iyi çalışır - dönüştürme nesnesini kullanın. Bu, önbelleğe alındıklarında veya önlenmediklerinde resimlerle de çalışır:

CSS:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Codepen örneği

Codepen LESS örneği