JavaScript - Holen Sie sich die Größe in bytes von HTML-img-src

Gut, das ist 2017, und Sie können nun Resource Timing API zum extrahieren eines Bilds transferSize, encodedBodySize, decodedBodySize in javascript:

Unten ist der code für den Zugriff auf Informationen zu den Größen für alle die imgs auf einer Seite (siehe Warnung für alle unten):

var imgElems = document.getElementsByTagName('img');
for ( var i=0, len = imgElems.length; i < len; i++ ) 
{
    var url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        var iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}

• Stellen Sie sicher, dass Sie den oben stehenden code ausführen, nachdem Dokument onload (um sicher zu sein Bilder geladen sind)
• Wegen CORS, timing-Informationen für Bilder, die kommen aus einer anderen Domäne nicht verfügbar sein kann (es sei denn, die verschiedenen domain-server gesetzt hat Timing-Allow-Origin-HTTP-Antwort-header)
• Sicher sein, resource timing api verfügbar ist, für den browser(N), die Sie gezielt : http://caniuse.com/#feat=resource-timing
• Stellen Sie sicher, Sie verstehen den Unterschied zwischen transferSize, encodedBodySize, decodedBodySize werden Sie sicher, dass Sie die richtige Größe-Attribut.