jQuery .load() không bắn vào hình ảnh (có thể là bộ nhớ đệm?)

Question

Tôi có một số mã jQuery khá cơ bản:

... 
$(this).find('img').load(function(){ 
    loadedImages++; 
    if(loadedImages == $this.find('img').length){ 
... 

Tuy nhiên, thats không bắn liên tục. Nó sẽ kích hoạt nếu tôi thực hiện làm mới hoặc đóng trình duyệt của tôi, nhưng làm mới bình thường hoặc chỉ cần nhấn cùng một URL hai lần bất kỳ lúc nào mà không xóa bộ nhớ cache làm cho .load() không bao giờ kích hoạt.

Bất kỳ ý tưởng nào về cách sửa lỗi này?

Answer 1

Một cách sẽ là thêm "biến giả" ở cuối URL mà bạn sử dụng để lấy hình ảnh ... chẳng hạn như thời gian tính bằng mili giây được nối với tham số chuỗi truy vấn.

Answer 2

Như Ron và El Guapo cho biết, câu trả lời là thêm truy vấn ở cuối URL. Tôi đã làm như sau:

$(this).find('img').each(function(){ 
    $(this).attr('src',$(this).attr('src')+'?'+new Date().getTime()) 
}).load(function(){ 
    //This will always run now! 

Answer 3

Tôi nghĩ điều này has been discussed before. Nó không phải là bộ nhớ đệm cho mỗi se đó là vấn đề nhưng thời gian: những hình ảnh có thể đã được tải bởi thời gian xử lý sự kiện được đính kèm (vì vậy nó không bao giờ bị sa thải). Điều này cũng có thể xảy ra nếu không có bộ nhớ đệm xảy ra, ví dụ trong một trình duyệt đa luồng trên một kết nối rất nhanh. May mắn thay, có một tài sản .complete mà bạn có thể sử dụng:

var load_handler = function() { 
    loadedImages++; 
    … 
} 
$(this).find('img').filter(function() { 
    return this.complete; 
}).each(load_handler).end().load(load_handler); 

Bạn cũng có thể tạo sự kiện riêng của bạn đính kèm chức năng:

jQuery.fn.extend({ 
    ensureLoad: function(handler) { 
     return this.each(function() { 
      if(this.complete) { 
       handler.call(this); 
      } else { 
       $(this).load(handler); 
      } 
     }); 
    } 
}); 

Và sau đó gọi nó như sau:

$(this).find('img').ensureLoad(function(){ 
    loadedImages++; 
    if(loadedImages == $this.find('img').length){ 
    … 
});