image.onload acara dan cache browser

113

Saya ingin membuat kotak peringatan setelah gambar dimuat, tetapi jika gambar disimpan di cache browser, .onloadacara tidak akan diaktifkan.

Bagaimana cara memicu peringatan ketika gambar telah dimuat terlepas dari apakah gambar telah di-cache atau tidak?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}
javascript image-loading Oto Shavadze
sumber
6
kemungkinan duplikat callback jQuery saat memuat gambar (bahkan saat gambar di-cache)
Fabrício Matté

Jawaban:

153

Saat Anda membuat gambar secara dinamis, setel onloadproperti sebelum src.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle - diuji pada rilis Firefox dan Chrome terbaru.

Anda juga dapat menggunakan jawabannya dalam posting ini , yang saya adaptasi untuk satu gambar yang dihasilkan secara dinamis:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Biola

Fabrício Matté
sumber
Tunggu. Mengapa contoh kode kedua Anda melakukan hal yang salah dan disetel .srcsebelum menyetel .onload? Anda melakukannya dengan benar di contoh kode pertama, tetapi mengacaukan yang kedua. Yang kedua tidak akan berfungsi dengan baik di beberapa versi IE.
jfriend00
1
@ jfriend00 Tidak, bukan kekacauan. Kode cadangan (yang kedua) tepat untuk jika yang pertama berhenti bekerja. =]Ini menggunakan .completepemeriksaan jika gambar sudah di-cache, maka kode itu mendemonstrasikannya. Tentu saja, untuk praktik terbaik, Anda selalu dapat menyetel srcafter all handler binding.
Fabrício Matté
4
Tidak ada alasan untuk mengandalkan .completekasus ini. Cukup setel penangan beban Anda terlebih dahulu sebelum menyetel .srcdan TIDAK PERNAH diperlukan. Saya telah menulis tayangan slide yang digunakan oleh ribuan situs di setiap browser yang memungkinkan dan teknik pertama bekerja setiap saat. Tidak perlu memeriksa .completekapan membuat gambar baru dari awal seperti ini.
jfriend00
Baiklah, terima kasih atas perhatiannya, perbarui jawaban untuk mencerminkan alasan Anda =]. Juga @ jfriend00 dapatkah Anda memeriksa apakah gambar dimuat di IE? Ingin tahu apakah ini masalah dengan jaringan saya atau dengan IE dan gambar.
Fabrício Matté
9
Juga hari ini saya menemukan bahwa kebutuhan webkit img.src = ''sebelum menetapkan src baru jika digunakan sebelumnya.
quux
10

Jika src sudah disetel maka peristiwa tersebut diaktifkan dalam kasus yang di-cache bahkan sebelum Anda mengikat pengendali peristiwa. Jadi, Anda juga harus memicu acara berdasarkan .complete.

contoh kode:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});
Tom Sarduy
sumber
6

Ada dua solusi yang mungkin untuk situasi semacam ini:

  1. Gunakan solusi yang disarankan di posting ini

  2. Tambahkan sufiks unik ke gambar srcuntuk memaksa browser mendownloadnya lagi, seperti ini:

    var img = new Image();
img.src = "img.jpg?_="+(new Date().getTime());
img.onload = function () {
    alert("image is loaded");
}

Dalam kode ini setiap kali menambahkan stempel waktu saat ini ke akhir URL gambar, Anda membuatnya unik dan browser akan mengunduh gambar itu lagi

haynar
sumber
44
Semua ini dilakukan untuk mengalahkan cache. Ini adalah cara yang SALAH untuk mengatasi masalah ini. Cara yang benar ada dalam jawaban Fabricio. Cukup setel .onloadpenangan sebelum menyetel .srcnilai dan Anda tidak akan melewatkan acara onload di beberapa versi IE.
jfriend00
1
ya Anda benar, tetapi tidak selalu diinginkan untuk menyimpan cache, terkadang gambar tidak boleh disimpan dalam cache. tentu saja dalam situasi khusus ini tergantung pada kebutuhan
haynar
1
Di aplikasi sudut saya, saya mencoba semua yang dikatakan jawaban lain, tetapi tidak membantu. Tetapi memaksa untuk tidak menyimpan cache seperti yang dikatakan jawaban ini berhasil untuk saya. Jadi ditambah satu dari saya.
Thanu
Satu-satunya solusi yang berhasil untuk saya di Chrome versi terbaru.
Bob Muda
3

Saya telah menemui masalah yang sama hari ini. Setelah mencoba berbagai metode, saya menyadari bahwa hanya menempatkan kode ukuran dalam $(window).load(function() {})bukannya document.readyakan memecahkan bagian dari masalah (jika Anda tidak ajaxing halaman).

pengguna9319
sumber
Ini juga merupakan jawaban yang bagus untuk situasi di mana peramban memiliki gambar dalam cache, berfungsi baik dengan pemuatan jendela
Shocker
persis masalah yang saya hadapi. berubah $(document).readyuntuk $(window).loadmemecahkan masalah saya.
Tariqul Islam
0

Saya menemukan bahwa Anda dapat melakukan ini di Chrome: 

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

Menyetel .src ke dirinya sendiri akan memicu acara onload.

Noah Ellman
sumber