5

私はインターネットから画像をロードします：

img.src = 'some_path'

ネットワークが遅い場合、一部の画像の読み込みに時間がかかり、一部の画像は読み込みに時間がかかり、失敗することに気付きました。

場合によっては、ドメインが一斉にダウンすることがあります。サーバーがダウンしている場合、エラーがすぐにスローされ、エラーをキャッチしてそれに応じて変更できるため、これはうまく機能しますsrc。

ただし、遅くて失敗するページの場合、最終的にエラーが発生する前に、ブラウザーが 10 秒以上のように見える何らかの空白のボックスを表示することがわかります。

長すぎるようです。サイトに約 4 秒待ってから、応答しない場合はエラーをスローします。

これを調整する方法はありますか？

エラーをスローする前にクライアントが待機する時間は?

この種の空白のブロックスがユーザーを 10 秒以上見つめているのは、ずさんに見えます。

現在ファイアフォックスで。

4

3 に答える 3

4

スクリプトで何かを取得するためのタイムアウトを設定する唯一の方法は、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-02T18:02:40.813 に答える
2

クロス/下位互換性

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-02T18:14:55.330 に答える