Comment obtenir la hauteur et la largeur de l'image à l'aide des compétences JS

Comment obtenir la hauteur et la largeur de l'image à l'aide des compétences JS_javascript

WBOY

Libérer： 2016-05-16 16:03:13

original

1203 Les gens l'ont consulté

Généralement, la façon d'obtenir la hauteur et la largeur d'une image est la suivante :

Copier le code Le code est le suivant :

var img = nouvelle image();

img.src = imgsrc;

var imgWH = CalcImgTiple(img.width, img.height);

Mais il ne peut pas être obtenu lorsqu'il est testé en chrome. img.width, img.height sont tous deux 0

Cause : Lorsque l'image n'est pas une image locale, mais une image réseau
Gestionnaire d'événements onload appelé lorsque l'image est chargée avec succès.

Lorsque je fais du développement web, il y a une exigence : utiliser Javascript pour obtenir la taille de l'image à charger, donc naturellement, j'ai pensé à la méthode onload de img. Après avoir terminé le développement sous Firefox, je suis allé sur IE pour. debug et j'ai découvert que l'événement onload d'img n'est pas appelé dans de nombreux cas.

Le code d'origine est le suivant :

Copier le code Le code est le suivant :

var img = nouvelle image;

img.src = "test.gif";

img.onload = fonction(){

alerte (img.width);

};

Ce code semble correct, mais pourquoi onload n'est-il pas appelé par IE ? Étant donné qu'IE met en cache les images, l'image chargée pour la deuxième fois n'est pas téléchargée depuis le serveur, mais chargée depuis le tampon. L'événement onload ne se déclenche-t-il pas pour les images chargées à partir du tampon ? J'ai donc testé le code suivant et ça a fonctionné~

Copier le code Le code est le suivant :

var img = nouvelle image;

img.onload = fonction(){

alerte ( img.width );

img.src = "test.gif";

Écrivez onload au premier plan, indiquez d'abord au navigateur comment traiter cette image, puis précisez la source de cette image, ce sera normal. Par conséquent, ce n'est pas qu'IE ne déclenche pas l'événement onload, mais parce que le tampon est chargé si rapidement que l'événement onload a déjà été déclenché avant l'exécution de img.onload. Cela me rappelle Ajax. Lors de l'écriture de xmlhttp, nous spécifions toujours d'abord la fonction de rappel de onstatechange, puis envoyons les données. Le principe est le même

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.