sự kiện image.onload và bộ nhớ cache của trình duyệt

Tôi muốn tạo một hộp cảnh báo sau khi hình ảnh được tải, nhưng nếu hình ảnh được lưu trong bộ nhớ cache của trình duyệt, .onloadsự kiện sẽ không được kích hoạt.

Làm cách nào để kích hoạt cảnh báo khi một hình ảnh đã được tải bất kể hình ảnh đó đã được lưu vào bộ nhớ đệm hay chưa?

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

Khi bạn đang tạo hình ảnh động, hãy đặt thuộc onloadtính trước src.

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

Fiddle - được thử nghiệm trên các bản phát hành Firefox và Chrome mới nhất.

Bạn cũng có thể sử dụng câu trả lời trong bài đăng này , mà tôi đã điều chỉnh cho một hình ảnh được tạo động duy nhất:

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

Vĩ cầm

Nếu src đã được đặt thì sự kiện sẽ kích hoạt trong trường hợp được lưu trong bộ nhớ cache trước khi bạn nhận được ràng buộc trình xử lý sự kiện. Vì vậy, bạn cũng nên kích hoạt sự kiện dựa trên .complete.

mẫu mã:

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

Có hai giải pháp khả thi cho những tình huống này:

1. Sử dụng giải pháp được đề xuất trên bài đăng này

2. Thêm một hậu tố duy nhất vào hình ảnh srcđể buộc trình duyệt tải xuống lại hình ảnh , như sau:

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

Trong mã này, mỗi khi thêm dấu thời gian hiện tại vào cuối URL hình ảnh, bạn đặt nó là duy nhất và trình duyệt sẽ tải lại hình ảnh xuống

Tôi đã gặp vấn đề tương tự ngày hôm nay. Sau khi thử nhiều phương pháp khác nhau, tôi nhận ra rằng chỉ cần đặt mã định cỡ bên trong $(window).load(function() {})thay vì đặt mã document.readysẽ giải quyết một phần vấn đề (nếu bạn không truy cập trang).

Tôi thấy rằng bạn có thể thực hiện việc này trong Chrome:

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

Đặt .src thành chính nó sẽ kích hoạt sự kiện tải.