Wie lange dauert es, bis ein Bild ausfällt -?

Question

Ich lade Bilder aus dem Internet als solche:

img.src = 'some_path' 

Ich habe bemerkt, dass einige Bilder, die eine lange Zeit dauern zu laden, wenn das Netzwerk langsam ist, und einige nehmen eine lange Zeit nicht geladen werden und dann.

Manchmal ist die Domäne alle zusammen herunter. Wenn der Server heruntergefahren ist, funktioniert das gut, weil ein Fehler ziemlich schnell ausgelöst wird und ich den Fehler abfangen und die src entsprechend ändern kann.

Aber für Seiten, die langsam sind und dann fehlschlagen - ich sehe, dass der Browser eine Art leeres Feld für wie 10 Sekunden oder mehr scheint, bevor schließlich aus.

Es scheint viel zu lange. Ich würde sagen, geben Sie der Website ca. 4 Sekunden und dann einen Fehler, wenn es nicht antwortet.

Gibt es sowieso, um dies einzustellen?

Die Zeitspanne, die der Client wartet, bevor ein Fehler ausgegeben wird?

Es sieht einfach schlampig aus, wenn dieser leere Blox den Benutzer 10 oder mehr Sekunden lang anstarrt.

Derzeit in FireFox.

Answer 1

Cross/abwärtskompatibel

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

Die einzige Möglichkeit, ein Timeout für das Abrufen von etwas im Skript zu setzen, ist die Verwendung eines XMLHttpRequest, so dass Sie in Ihr Bild zum Beispiel durch Ajax laden können;

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

Nachteile dieses Verfahrens sind Browser Abwärtskompatibilität und wenn der Server etwas gibt, aber es ist kein Bild

Answer 3

starten:

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/

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

Beachten Sie, dass der Code zum ersten Mal ordnungsgemäß ausgeführt wird. Danach wird das Bild zwischengespeichert und möglicherweise schneller geladen.