イメージに時間がかかるのはどのくらいですか？

Question

私のような、インターネットから画像を読み込む：

img.src = 'some_path' 

を私はいくつかの画像は、ネットワークが遅い場合のロードに時間がかかる、といくつかのロードし、失敗するのに長い時間を要することに気づきました。

ドメインがすべてダウンしていることがあります。サーバーが停止している場合、これはうまくいきます。なぜなら、エラーはかなり早くスローされ、エラーをキャッチしてそれに応じてsrcを変更できるからです。

しかし、遅くて失敗したページの場合、ブラウザでは、最終的にエラーが発生するまでに10秒以上かかるような空白のボックスが表示されます。

あまりにも長いようです。私は、約4秒間、サイトを与えて、それが応答しない場合はエラーをスローすると言うでしょう。

これを調整するにはどうすればよいですか？

エラーをスローする前にクライアントが待機する時間はどれくらいですか？

この種のブランクブロックを10秒以上ユーザーが見つめているのはちょっとうんざりです。

現在FireFoxにあります。

Answer 1

クロス/下位互換

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

スクリプトで何かを取得するためのタイムアウトを設定する唯一の方法は、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 
); 

この方法の欠点ブラウザーあり、下位互換性とサーバーが何かを返しますが、それはこの試しくださいイメージ

Answer 3

されていない場合：コードを使用してhttp://jsfiddle.net/hescano/mLhdv/

：

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をからCheck if an image is loaded (no errors) in JavaScript

初めてコードが正常に実行されるが、その後はイメージがキャッシュされ、読み込みが高速になることに注意してください。