Bagaimana untuk Memastikan Peristiwa yang dimuatkan Terbakar Walaupun dengan Imej Cached?

Memuatkan Imej dan Menavigasi Cache Penyemak Imbas dengan Peristiwa onload

Acara pemuatan imej adalah penting untuk melaksanakan tindakan apabila imej telah berjaya dimuatkan. Walau bagaimanapun, acara itu boleh menghadapi had apabila berurusan dengan imej cache yang disimpan dalam penyemak imbas. Artikel ini meneroka cara untuk mengatasi isu ini dan mencetuskan acara onload secara konsisten.

Cabaran: Imej Cache dan Acara onload

Dalam pembangunan web, acara onload ialah dilampirkan pada elemen dan dicetuskan apabila imej dimuatkan sepenuhnya. Ini membolehkan pembangun melaksanakan tugas tertentu selepas imej kelihatan kepada pengguna. Walau bagaimanapun, imej cache yang dicache dalam penyemak imbas boleh memintas acara ini, menyebabkan tiada amaran dipaparkan dalam senario imej cache.

Penyelesaian 1: Menetapkan onload Sebelum Menambah src

Untuk memastikan peristiwa onload dicetuskan tanpa mengira status caching, ubah suai urutan kod. Daripada menetapkan atribut src sebelum acara onload, tentukan fungsi onload terlebih dahulu. Ini membolehkan penyemak imbas mendaftarkan pengendali acara sebelum ia cuba memuatkan imej.

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

Penyelesaian 2: Menggunakan Acara beban jQuery

Pendekatan alternatif melibatkan penggunaan jQuery, perpustakaan JavaScript yang diterima pakai secara meluas. Peristiwa muat jQuery menyediakan penyelesaian apabila acara pemuatan standard mungkin tidak dicetuskan dalam senario imej cache. Kod berikut menggambarkan teknik ini:

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

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Peristiwa yang dimuatkan Terbakar Walaupun dengan Imej Cached?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!