image.onload เหตุการณ์และแคชของเบราว์เซอร์

ฉันต้องการสร้างกล่องแจ้งเตือนหลังจากโหลดรูปภาพแล้ว แต่หากรูปภาพถูกบันทึกไว้ในแคชของเบราว์เซอร์.onloadเหตุการณ์จะไม่เริ่มทำงาน

ฉันจะแจ้งเตือนได้อย่างไรเมื่อรูปภาพถูกโหลดไม่ว่ารูปภาพนั้นจะถูกแคชหรือไม่ก็ตาม

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

ในขณะที่คุณสร้างภาพแบบไดนามิกให้ตั้งค่าonloadคุณสมบัติก่อนไฟล์src.

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

Fiddle - ทดสอบกับ Firefox และ Chrome รุ่นล่าสุด

คุณยังสามารถใช้คำตอบในโพสต์นี้ซึ่งฉันปรับให้เหมาะกับรูปภาพที่สร้างแบบไดนามิกภาพเดียว:

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

ซอ

หากตั้งค่า src ไว้แล้วเหตุการณ์จะเริ่มทำงานในกรณีแคชก่อนที่คุณจะได้รับตัวจัดการเหตุการณ์ ดังนั้นคุณควรทริกเกอร์เหตุการณ์ตาม.completeด้วย

ตัวอย่างโค้ด:

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

มีสองวิธีแก้ปัญหาที่เป็นไปได้สำหรับสถานการณ์ประเภทนี้:

1. ใช้วิธีแก้ปัญหาที่แนะนำในโพสต์นี้

2. เพิ่มคำต่อท้ายที่ไม่ซ้ำกันให้กับรูปภาพsrcเพื่อบังคับให้เบราว์เซอร์ดาวน์โหลดอีกครั้งดังนี้:

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

ในรหัสนี้ทุกครั้งที่เพิ่มการประทับเวลาปัจจุบันที่ส่วนท้ายของ URL รูปภาพคุณทำให้ไม่ซ้ำกันและเบราว์เซอร์จะดาวน์โหลดรูปภาพอีกครั้ง

ฉันได้พบกับปัญหาเดียวกันในวันนี้ หลังจากลองใช้วิธีการต่างๆฉันตระหนักดีว่าเพียงแค่ใส่รหัสขนาดไว้ข้างใน$(window).load(function() {})แทนที่จะdocument.readyแก้ปัญหาส่วนหนึ่ง (หากคุณไม่ได้เปิดหน้านี้)

ฉันพบว่าคุณสามารถทำได้ใน Chrome:

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

การตั้งค่า. src เป็นตัวมันเองจะทริกเกอร์เหตุการณ์ onload