Jak długo trwa niepowodzenie obrazu?

Question

załadować obrazy z Internetu, takich jak:

img.src = 'some_path' 

Zauważyłem, że niektóre obrazy zająć dużo czasu, aby załadować, jeśli sieć jest powolna, a niektóre zająć dużo czasu, aby załadować, a następnie niepowodzeniem.

Czasami domena jest wyłączona. Jeśli serwer jest wyłączony, działa to dobrze, ponieważ błąd zostanie wygenerowany dość szybko i mogę złapać błąd i odpowiednio zmienić src.

Jednak dla stron, które są wolne, a następnie nieudane - widzę, że przeglądarka wyświetla jakieś puste pole na 10 sekund lub dłużej, zanim ostatecznie zostanie usunięte.

Wydaje się zbyt długo. Powiedziałbym, że podaj stronę około 4 sekund, a następnie wyślij błąd, jeśli nie odpowie.

Czy mimo to można to zmienić?

Czas oczekiwania klienta przed zgłoszeniem błędu?

Po prostu wygląda to niechlujnie, gdy ktoś ma takie puste zbocze gapiąc się na użytkownika przez 10 lub więcej sekund.

Obecnie w FireFox.

Answer 1

Krzyż/Kompatybilny

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

Jedynym sposobem, jaki znam, aby ustawić limit czasu dla uzyskania czegoś w skrypcie, jest użycie XMLHttpRequest, aby można było załadować obraz na przykład przez ajax, na przykład;

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

Wady tej metody kompatybilność wstecz przeglądarkę i jeśli serwer zwraca coś, ale nie jest to obraz

Answer 3

Spróbuj:

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/

przy użyciu kodu od Check if an image is loaded (no errors) in JavaScript

Należy zauważyć, że po raz pierwszy kod będzie działał poprawnie, ale po tym obraz będzie buforowany i może ładować się szybciej.