圖片失敗多久 - ？

我加載從互聯網上的圖像作爲例如：圖片失敗多久 - ？

img.src = 'some_path'

我注意到，一些圖像需要很長的時間，如果網絡加載緩慢，有的需要很長的時間來加載，然後失敗。

有時，域關閉所有在一起。如果服務器出現故障，這可以很好地工作，因爲錯誤會很快拋出，我可以發現錯誤並相應地更改src。

然而，對於速度很慢，然後失敗的網頁 - 我看到瀏覽器顯示某種空白框爲最後示數之前什麼似乎像10秒以上。

好像太長了。我會說，給網站大約4秒，然後拋出一個錯誤，如果它沒有迴應。

反正有沒有調整？

的時候拋出一個錯誤之前，客戶等待的時間？

看起來馬虎似乎有這種空白blox盯着用戶10秒或更多秒。

目前在FireFox中。

來源

2013-08-02 nativist.bill.cutting

十字/向後兼容

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);

來源

2013-08-02 18:14:55

我不覺得這是必要的，但對你來說，任何編輯製作:) –

這實際上是必要的，因爲即使加載失敗的圖像將被標記爲完整。 –

我知道的設置超時腳本得到的東西的唯一方法是通過使用XMLHttpRequest的，所以你可以在你的圖像通過Ajax加載，例如;這種方法的

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 
);

缺點是瀏覽器的向後兼容性，如果服務器返回的東西，但它不是一個圖像

來源

2013-08-02 18:02:40

'值0（這是默認值）表示沒有timeout.' https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest –

我只針對現代瀏覽器，但仍然MDN聲明這是實驗性的，我找不到一個很好的兼容性圖表 - https://developer.mozilla.org/en-US/docs/Web/API /URL.createObjectURL –

logan的解決方案看起來更容易。 –

試試這個：

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/

從Check if an image is loaded (no errors) in JavaScript

請注意，代碼第一次運行良好，但在此之後，圖像將被緩存，並且可能會加載更快。

來源

2013-08-02 18:05:21

圖片失敗多久 - ？

回答

相關問題