Cách phát hiện lỗi tải hình ảnh và nếu không thành công, hãy thử tải lại cho đến khi thành công?

Question

Tôi có một số hình ảnh tải từ bên ngoài và không kiểm soát được tính khả dụng của chúng. Tôi đã tìm thấy rằng dưới tải nặng đôi khi họ không tải được, nhưng trên một làm mới nhanh chóng họ sẽ hiển thị ngay lập tức.

Có cách nào để phát hiện xem hình ảnh có tải không và sau đó nếu có, hãy gợi ý tải lại trên img src cho đến khi tải? Nếu vậy, bạn có thể vui lòng cung cấp một ví dụ không?

Answer 1

Đây là thứ tôi đã biên dịch có thể giúp ích. Tôi không thể kiểm tra việc này, vui lòng cho tôi biết nếu bạn gặp bất kỳ vấn đề nào.

$(function() { 
    var $images = $('img.imageClassUpdateAtInterval:not([src="/assets/spinner.gif"])'); 

    // Now, no such image with 
    // a spinner 
    if($images.length === 0 && window.imageLocator) 
    clearInterval(window.imageLocator); 


    window.imageLocator = setInterval(function() { 
     $images.each(function() { 
      $this = $(this); 
      if (!$this.data('src')) { 
       $this.data('src', $this.prop('src')); 
      } 

      $this.prop('src', $this.data('src') + '?timestamp=' + new Date().getTime()); 
      console.log($this.prop('src')); 
     }); 
    }, 60 * 1000); 

    // suppose, an error occured during 
    // locating the src (source) of the 
    // image - image not found, network 
    // unable to locate the resource etc. 
    // it will fall in each time on error 
    // occurred 
    $('img.imageClassUpdateAtInterval').error(
      function() { 
       // set a broken image 
       $(this).unbind("error").attr("src", "/assets/broken.gif"); 
       // setting this up in relative 
       // position 
       $(this).css("position", "relative"); 
       $(this).apppend("<span>Error occured</span>"); 
       $(this).find("span").css({"position": "absolute", "background-color": "#252525", "padding": ".3em", "bottom": "0"}); 
    }); 

}); 

Các giải pháp trên được biên soạn từ hai giải pháp khác nhau bắt đầu bởi @user113716 và @travis

Answer 2

<img onerror="dosomthing()" ...> 

Answer 3

hãy nhìn vào mã này:

$('img.autoFix').error(function(){ 
    var src = this.src; 
    this.src = src.substr(0, src.indexOf('?')) + '?t=' + new Date().getTime() 
}); 

Answer 4

Đây là một cách tiếp cận rất đơn giản để xử lý tất cả các hình ảnh trên trang.

---

https://github.com/doomhz/jQuery-Image-Reloader

jQuery ảnh reloader

Lực lượng trình duyệt để thử lại tải những hình ảnh bị hỏng. Một giải pháp tốt cho hình ảnh được lưu trữ trong một đám mây (ví dụ Amazon S3).

Tại sao và khi nào nên sử dụng?

Plugin này có hiệu quả khi bạn tải hình ảnh từ đám mây (ví dụ: Amazon S3) và CDN có sự chậm trễ cho đến khi hình ảnh có thể truy cập được. Trình duyệt sẽ hiển thị biểu tượng hình ảnh bị hỏng thay vào đó và sẽ không thử tải lại nó. jQuery Image Reloader sẽ xử lý điều đó.

đang Plugin

Mã duy nhất bạn cần phải kích hoạt các plugin là thế này:.

$(".slow-images").imageReloader();