web-dev-qa-db-fra.com

Obtenez les dimensions de l'image avec Javascript avant que l'image ne soit complètement chargée

J'ai lu différents types de façons d'obtenir les dimensions d'une image une fois qu'une image est complètement chargée, mais serait-il possible d'obtenir les dimensions d'une image une fois qu'elle a commencé à se charger?

Je n'ai pas trouvé grand-chose à ce sujet en recherchant (ce qui me fait croire que ce n'est pas possible), mais le fait qu'un navigateur (dans mon cas Firefox) affiche les dimensions de toute image que j'ouvre dans un nouvel onglet juste dans le titre après il a juste commencé à charger l'image me donne l'espoir qu'il existe réellement un moyen et j'ai juste raté les bons mots clés pour le trouver.

javascriptimageloadingdimensions
32
user828591

Vous avez raison de dire que l'on peut obtenir les dimensions de l'image avant qu'elle ne soit complètement chargée.

Voici une solution ( démo ):

var img = document.createElement('img');

img.src = 'some-image.jpg';

var poll = setInterval(function () {
    if (img.naturalWidth) {
        clearInterval(poll);
        console.log(img.naturalWidth, img.naturalHeight);
    }
}, 10);

img.onload = function () { console.log('Fully loaded'); }
42
katspaugh

Le code suivant renvoie largeur/hauteur dès qu'il est disponible. Pour tester le changement abc123 dans la source d'image vers n'importe quelle chaîne aléatoire pour empêcher la mise en cache.

Il y a aussi JSFiddle Demo .

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>
11
aleemb

En fait, c'est beaucoup plus facile, il vous suffit de récupérer les dimensions dans la fonction de chargement de l'image.

var tempImage1 = new Image();
tempImage1.src = "path/to/image";
tempImage1.onload = function() {
    console.log(tempImage1.width, tempImage1.height);
}
2
user1219381

Une façon consiste à utiliser la requête HEAD, qui demande uniquement l'en-tête HTTP de la réponse. Je sais que dans les réponses HEAD, la taille du corps est incluse) Mais je ne sais pas s'il y a quelque chose de disponible pour la taille des images.

1
Saeed Neamati