JavaScript - d'Obtenir la taille en octets de code HTML img src
je voudrais savoir comment obtenir la taille en octets à partir du" src "à partir d'une balise" img " avec HTML/JS.
<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/>
dans l'exemple ci-dessus je voudrais basicly savoir comment grand" testpattern.gif" est (en octets).
Merci d'avance.
2 réponses
Javscript est un script purement côté client et si vous me demandez si nous pouvons obtenir la taille de l'image seulement en utilisant javascript, que ma réponse est "Non" . Même si vous exécutez les fichiers localement, vous ne pourrez pas obtenir la taille du fichier.
XMLHttpRequest object
var obj = new XMLHttpRequest();
obj.open('HEAD', 'image path', true);
obj.onreadystatechange = function(){
if ( obj.readyState == 4 ) {
if ( obj.status == 200 ) {
alert('Size in bytes: ' + obj.getResponseHeader('Content-Length'));
} else {
alert('ERROR');
}
}
};
obj.send(null);
ceci est essentiellement utilisé pour envoyer la requête http ou https à un serveur situé derrière le scène et charger la réponse de retour au script. Cela est pris en charge par les navigateurs modernes, les plus anciens utilisés pour avoir un semblable appelé ActiveXObject. L'événement onReadyStateChange a ses 5 étapes prêtes.
- 0=demande non initialisée
- 1=connexion au serveur établie
- 2 = demande reçue
- 3 = Demande de traitement
- 4=traitement terminé et réponse prête
.
Eh bien, nous sommes en 2017 et vous pouvez maintenant utiliser L'API Resource Timing pour extraire la transferSize, encodedBodySize, decodedBodySize d'une image dans javascript:
ci-dessous est le code pour accéder à l'information de taille pour tous les imgs sur une page (voir la mise en garde à tous ci-dessous):
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
}
}
- assurez-vous d'exécuter le code ci-dessus après le document chargé (pour être sûr que les images sont chargées)
- dû à CORS, les informations de synchronisation pour les images provenant d'un domaine différent peuvent ne pas être disponibles (à moins que le serveur du domaine différent n'ait défini L'en-tête de réponse HTTP Timing-Allow-Origin)
- assurez-vous que l'api de synchronisation des ressources est disponible pour le(s) navigateur (s) que vous ciblez: http://caniuse.com/#feat=resource-timing
- assurez-vous d'obtenir une compréhension de la différence entre transferSize, encodedBodySize, decodedBodySize pour être sûr que vous utilisez le droit attribut de taille.