Làm cách nào để biết một hình ảnh được tải hoặc được lưu trong bộ nhớ cache trong JQuery?

Question

Dường như hàm .load() không kích hoạt nếu hình ảnh đã được lưu vào bộ nhớ cache trước đó. Vì vậy, nếu bạn muốn chắc chắn một hình ảnh đã được nạp trước khi bạn tải và hiển thị khác (ví dụ: Magnifier), bạn không thể làm điều gì đó như:

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

Vì vậy, làm thế nào để bảo đảm trật tự tải trong JQuery?

Answer 1

Những gì bạn phải làm là xử lý các kết buộc tải của bạn một cách chọn lọc. Bạn có thể xác minh tải bằng cách kiểm tra thuộc tính đối tượng Hình ảnh complete.

Ví dụ:

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

Lưu ý rằng ở trên, this (sử dụng riêng lẻ) đề cập đến các tài liệu tham khảo DOM để các đối tượng hình ảnh được cung cấp bởi jQuery.

Answer 2

Cảm ơn Sparkey,

Tôi sẽ dùng thử nhưng có vẻ tốt. Tôi tìm thấy một cuộc thảo luận sâu rộng về chủ đề ở đây: http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

dẫn tôi đến "jQuery 'onImagesLoad' Plugin" ở đây: http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

mà dường như để giải quyết vấn đề này như sau:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

Mà khá nhiều nhọt xuống những gì bạn nói, chỉ có kiểm tra hoàn thành của ông cũng kiểm tra cho "không xác định".

Answer 3

Nếu bạn muốn quấn tất cả các chức năng này trong một phương pháp mở rộng jQuery, hãy thử này (mà nên làm việc chờ đợi bất kỳ số lượng hình ảnh):

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

và sau đó chỉ cần sử dụng như thế này:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

Answer 4

Bạn cũng có thể kiểm tra xem hình ảnh của bạn có chiều rộng hoặc chiều cao để phát hiện xem hình ảnh đã được tải chưa.

Ví dụ:

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}