jQuery callback saat memuat gambar (bahkan saat gambar di-cache)

Aku ingin melakukan:

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

Tetapi acara memuat tidak menyala ketika gambar diambil dari cache. Dokumen jQuery menyarankan plugin untuk memperbaikinya, tetapi tidak berfungsi

Jika srcsudah diatur, maka acara menembak dalam kasus di-cache, bahkan sebelum Anda terikat event handler. Untuk memperbaikinya, Anda bisa mengulang memeriksa dan memicu acara didasarkan .complete, seperti ini:

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

Perhatikan perubahan dari .bind()ke .one()sehingga event handler tidak berjalan dua kali.

Dapatkah saya menyarankan Anda memuatnya kembali ke objek gambar non-DOM? Jika di-cache, ini tidak akan memakan waktu sama sekali, dan muatannya masih akan menyala. Jika tidak di-cache, itu akan mem-onload ketika gambar dimuat, yang harus menjadi waktu yang sama dengan versi DOM dari gambar selesai memuat.

Javascript:

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

Diperbarui (untuk menangani beberapa gambar dan dengan lampiran yang dipesan dengan benar):

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

Solusi sederhana saya, tidak memerlukan plugin eksternal dan untuk kasus umum seharusnya sudah cukup:

/**
 * 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);
            });
        }
    });
};

gunakan seperti ini:

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

misalnya, untuk memudar pada gambar Anda saat memuat yang dapat Anda lakukan:

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

Atau sebagai alternatif, jika Anda lebih suka pendekatan seperti plugin jquery:

/**
 * 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);

dan gunakan dengan cara ini:

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

sebagai contoh:

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

Apakah Anda benar-benar harus melakukannya dengan jQuery? Anda dapat melampirkan onloadacara langsung ke gambar Anda juga;

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

Itu akan menyala setiap kali gambar telah dimuat, dari cache atau tidak.

Anda juga dapat menggunakan kode ini dengan dukungan untuk memuat kesalahan:

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

Saya sendiri hanya mengalami masalah ini, mencari di mana-mana solusi yang tidak melibatkan mematikan cache atau mengunduh plugin.

Saya tidak melihat utas ini segera jadi saya menemukan sesuatu yang bukan perbaikan yang menarik dan (saya pikir) layak untuk diposkan di sini:

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

Saya sebenarnya mendapat ide ini dari komentar di sini: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

Saya tidak tahu mengapa ini bekerja tetapi saya telah menguji ini pada IE7 dan di mana ia rusak sebelum sekarang bekerja.

Semoga ini bisa membantu,

Edit

Jawaban yang diterima sebenarnya menjelaskan mengapa:

Jika src sudah disetel maka event menembakkan cache yang sudah di-cache sebelum Anda mengikat event handler.

Dengan menggunakan jQuery untuk menghasilkan gambar baru dengan src gambar, dan menetapkan metode pemuatan langsung untuk itu, metode pemuatan berhasil dipanggil ketika jQuery selesai menghasilkan gambar baru. Ini berfungsi untuk saya di IE 8, 9 dan 10

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

Solusi yang saya temukan https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (Kode ini diambil langsung dari komentar)

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

Modifikasi pada contoh GUS:

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

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

Atur sumber sebelum dan sesudah onload.

Cukup tambahkan kembali argumen src pada baris yang terpisah setelah img oject didefinisikan. Ini akan menipu IE untuk memicu event-lad. Ini jelek, tapi ini solusi paling sederhana yang saya temukan sejauh ini.

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

Saya bisa memberi Anda sedikit tip jika Anda ingin melakukan ini:

<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>

Jika Anda melakukan itu ketika peramban menyimpan gambar, tidak masalah selalu ditampilkan tetapi memuat gambar di bawah gambar asli.

Saya punya masalah dengan IE ini dimana e.target.width akan tidak terdefinisi. Acara memuat akan menyala tetapi saya tidak bisa mendapatkan dimensi gambar di IE (chrome + FF berfungsi).

Ternyata Anda perlu mencari e.currentTarget.naturalWidth & e.currentTarget.naturalHeight .

Sekali lagi, IE melakukan hal-hal dengan caranya sendiri (lebih rumit).

Anda dapat menyelesaikan masalah Anda menggunakan plugin JAIL yang juga memungkinkan Anda untuk malas memuat gambar (meningkatkan kinerja halaman) dan meneruskan panggilan balik sebagai parameter

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

HTML akan terlihat seperti

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

Jika Anda menginginkan solusi CSS murni, trik ini berfungsi sangat baik - gunakan objek transformasi. Ini juga berfungsi dengan gambar ketika di-cache atau tidak:

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

Contoh codepen

Contoh codepen KURANG