Quanto tempo ci vuole per fallire un'immagine?

Question

ho caricare le immagini da Internet in quanto tale:

img.src = 'some_path' 

ho notato che alcune immagini impiegano molto tempo per caricare se la rete è lenta, e alcuni prendono molto tempo per caricare e poi fallire.

A volte, il dominio è giù tutti insieme. Se il server non funziona, funziona bene, perché un errore verrà lanciato abbastanza velocemente e posso rilevare l'errore e modificare il src di conseguenza.

Tuttavia, per le pagine lente e quindi non riuscite, vedo che il browser visualizza una sorta di riquadro vuoto per quelli che sembrano 10 secondi o più prima di uscire definitivamente.

Sembra troppo lungo. Direi di dare al sito circa 4 secondi e poi lanciare un errore se non risponde.

Esiste comunque una modifica?

La quantità di tempo che il client attende prima di generare un errore?

Sembra proprio sciatto avere questo tipo di blox bianco che fissa l'utente per 10 o più secondi.

Attualmente in FireFox.

Answer 1

Cross/Compatibile

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

L'unico modo che conosco per impostare un timeout per ottenere qualcosa nello script è utilizzando un XMLHttpRequest, in modo da poter caricare l'immagine tramite ajax, ad esempio;

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

svantaggi di questo metodo sono compatibilità del browser e se il server restituisce qualcosa, ma non è un'immagine

Answer 3

Prova questo:

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/

utilizzando il codice da Check if an image is loaded (no errors) in JavaScript

Si noti che la prima volta che il codice verrà eseguito correttamente, ma successivamente l'immagine verrà memorizzata nella cache e potrebbe caricarsi più rapidamente.