Mất bao lâu để hình ảnh bị lỗi -?

Question

tôi tải hình ảnh từ internet như vậy:

img.src = 'some_path' 

tôi nhận thấy rằng một số hình ảnh mất một thời gian dài để nạp nếu mạng chậm, và một số mất nhiều thời gian để tải và sau đó thất bại.

Đôi khi, miền bị hết tất cả. Nếu máy chủ bị hỏng, điều này hoạt động tốt, bởi vì một lỗi sẽ được ném khá nhanh và tôi có thể bắt lỗi và thay đổi src cho phù hợp.

Tuy nhiên, đối với các trang chậm và sau đó không thành công - tôi thấy trình duyệt hiển thị một số loại hộp trống cho những gì có vẻ như 10 giây hoặc hơn trước khi cuối cùng bị lỗi.

Dường như quá dài. Tôi muốn nói cho trang web khoảng 4 giây và sau đó ném một lỗi nếu nó không đáp ứng.

Có cách nào để điều chỉnh điều này không?

Lượng thời gian khách hàng đợi trước khi phát hiện lỗi?

Nó trông có vẻ cẩu thả để có loại blox trống này nhìn chằm chằm vào người dùng trong 10 giây trở lên.

Hiện tại trong FireFox.

Answer 1

Cross/Backward tương thích

function loadImage(src, complete, timeout) { 
    var img = document.createElement("img"); 
    img.src = src; 
    setTimeout(function() { 
     complete(img.complete && img.naturalWidth !== 0 ? img : false); 
    }, timeout || 5000); 
} 

loadImage("path/to/image.png", function(img) { 
    if(img) { 
     //TODO ON SUCCESS 
    } else { 
     //TODO ON FAILURE 
    } 
}, 4000); 

Answer 2

Cách duy nhất tôi biết để đặt thời gian chờ để nhận nội dung trong kịch bản là sử dụng XMLHttpRequest, vì vậy bạn có thể tải hình ảnh của mình qua ajax, ví dụ;

function getImage(src, callback, maxTime) { 
    var x = new XMLHttpRequest(); 
    if (maxTime) x.timeout = maxTime; 
    x.onload = function() { 
     var img = new Image(); 
     img.src = window.URL.createObjectURL(this.response); 
     callback(img); 
    }; 
    x.onerror = function() { 
     callback(null); 
    }; 
    x.open('GET', src, true); 
    x.responseType = 'blob'; // save having to re-create blob 
    x.send(null); 
} 
getImage(
    'some_path',  // get image at "some_path" 
    function (img) { // then 
     if (!img) alert('failed!');   // whatever if didnt work 
     else document.body.appendChild(img); // whatever if did work 
    }, 
    4000    // maximum wait is 4 seconds 
); 

Nhược điểm của phương pháp này là khả năng tương thích ngược trình duyệt và nếu máy chủ trả về một cái gì đó nhưng nó không phải là một hình ảnh

Answer 3

Hãy thử điều này:

var img = document.getElementById("myImg") 
img.src = 'https://atmire.com/dspace-labs3/bitstream/handle/123456789/7618/earth-map-huge.jpg?sequence=1'; //very big image, takes like 7 seconds to load 
window.setTimeout(function() 
{ 
    if(!IsImageOk(img)) 
     img.src = "http://www.google.com/images/srpr/logo4w.png"; 
},4000); 

function IsImageOk(img) { 
    // During the onload event, IE correctly identifies any images that 
    // weren’t downloaded as not complete. Others should too. Gecko-based 
    // browsers act like NS4 in that they report this incorrectly. 
    if (!img.complete) { 
     return false; 
    } 

    // However, they do have two very useful properties: naturalWidth and 
    // naturalHeight. These give the true size of the image. If it failed 
    // to load, either of these should be zero. 

    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
     return false; 
    } 

    // No other way of checking: assume it’s ok. 
    return true; 
} 

jsFiddle: http://jsfiddle.net/hescano/mLhdv/

sử dụng mã từ Check if an image is loaded (no errors) in JavaScript

Lưu ý rằng lần đầu tiên mã sẽ chạy tốt, nhưng sau đó hình ảnh sẽ được lưu vào bộ nhớ cache và có thể tải nhanh hơn.