So ermitteln Sie Bildhöhe und -breite mithilfe von JS_Javascript-Kenntnissen

Im Allgemeinen erhalten Sie die Höhe und Breite eines Bildes wie folgt:

Code kopieren Der Code lautet wie folgt:

var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

Aber beim Test in Chrom kann es nicht erreicht werden. img.width und img.height sind beide 0

Ursache: Wenn es sich bei dem Bild nicht um ein lokales Bild, sondern um ein Netzwerkbild handelt
Der Onload-Ereignishandler wird aufgerufen, wenn das Bild erfolgreich geladen wurde.

Bei der Webentwicklung gibt es eine Anforderung: Verwenden Sie Javascript, um die Größe des zu ladenden Bildes zu ermitteln. Daher habe ich natürlich an die Onload-Methode von img gedacht. Nach Abschluss der Entwicklung unter Firefox bin ich zum IE gegangen Debuggen und festgestellt, dass das Onload-Ereignis von img in vielen Fällen nicht aufgerufen wird.

Der Originalcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var img = neues Bild;
img.src = "test.gif";
img.onload = function(){
Warnung (img.width);
};

Dieser Code sieht gut aus, aber warum wird onload vom IE nicht aufgerufen? Da IE Bilder zwischenspeichert, wird das zum zweiten Mal geladene Bild nicht vom Server hochgeladen, sondern aus dem Puffer geladen. Wird das Onload-Ereignis nicht für Bilder ausgelöst, die aus dem Puffer geladen werden? Also habe ich den folgenden Code getestet und er hat funktioniert~

Code kopieren Der Code lautet wie folgt:

var img = neues Bild;
img.onload = function(){
Warnung ( img.width ); };
img.src = "test.gif";

Schreiben Sie onload nach vorne, teilen Sie dem Browser zunächst mit, wie dieses Bild verarbeitet werden soll, und geben Sie dann die Quelle dieses Bildes an. Dies ist normal. Daher liegt es nicht daran, dass der IE das Onload-Ereignis nicht auslöst, sondern daran, dass der Puffer so schnell geladen wird, dass das Onload-Ereignis bereits ausgelöst wurde, bevor img.onload ausgeführt wird. Das erinnert mich an Ajax. Beim Schreiben von xmlhttp geben wir immer zuerst die Rückruffunktion von onstatechange an und senden dann die Daten. Das Prinzip ist das gleiche

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.