Warum gibt naturalHeight oder naturalWidth `undefined` zurück?

Meine Klassenzuordnung will, dass mir den defer Tag für das Skript verwenden, ich bin Referenzierung, aber dies führt zu dem Bild des naturalWidth in meiner JS-Datei aufgrund der Reihenfolge der Ausführung nicht definiert werden.Warum gibt naturalHeight oder naturalWidth `undefined` zurück?

Mein HTML hat diese Zeile im Kopf (Zuordnung will, dass ich es in den <head> setzen, aber defer="defer" verwenden) <script src="scripts/script.js" defer="defer"></script>

Meine js:

var catImageWidth = document.getElementById("cat-image").naturalWidth; 
var birdImage = document.getElementById("bird-image"); 
birdImage.width = catImageWidth;

So habe ich versucht, dies:

var catImage = document.getElementById("cat-image"); 
var birdImage = document.getElementById("bird-image"); 
var catImageWidth; 

catImage.onload = function() { 
    catImageWidth = this.naturalWidth; 
    console.log(catImageWidth) //logs 600 
} 

birdImage.width = catImageWidth; //logs `undefined`

ich denke, dass die Zuweisung von birdImage.width nicht definiert ist, da diese Zeile Code ru ns vor catImage.onload passiert tatsächlich. Bedeutet dies, dass ich Sklave bin auf der Zuweisung birdImage.width im Rahmen der function von catImage.onload?

P.S. Ich versuchte ES6 von catImage.onload =() => { //block of code }, aber das schien nicht zu funktionieren.

Quelle

2017-06-11 simmonson

Bedeutet dies, dass ich Sklave bin birdImage.width von catImage.onload im Rahmen der Funktion zuweisen?

Scheint so, das ist der beste Weg, es zu tun.

Sie können einen Pfeil Funktion verwenden, aber nicht mit dem this Schlüsselwort um das Bild zu verweisen.

funktioniert nicht:

catImage.onload =() => { 
    catImageWidth = this.naturalWidth; //undefined 
    console.log(catImageWidth) 
}

Da in Pfeil Funktion der this Objekt auf die Bildreferenz nicht bindet, verweist es der äußere Umfang des this.

funktioniert:

catImage.onload = function() { 
    catImageWidth = this.naturalWidth; 
    console.log(catImageWidth) //logs 600 
}

Oder:

catImage.onload = function() { 
    catImageWidth = catImage.naturalWidth; 
    console.log(catImageWidth) //logs 600 
}

Quelle

2017-06-11 03:20:36

Das Problem ist, dass Sie eine Variable außerhalb des Bereichs zuzugreifen versuchen.

Bitte geben diesem einen Versuch:

<img id="cat-image" src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"> 
<img id="bird-image" src="http://animalia-life.club/data_images/bird/bird3.jpg"> 

<script> 
var catImage = document.getElementById("cat-image"); 
var birdImage = document.getElementById("bird-image"); 
var catImageWidth; 

catImage.onload = function() { 
    catImageWidth = this.naturalWidth; 
    birdImage.width = catImageWidth; 
} 

console.log(birdImage.width); 
</script>

Quelle

2017-06-11 03:33:24

Diese noch einmal geschehen muss, obwohl ich die 'defer' Tag haben? Ich dachte, dass die Verschiebung des Skripts warten würde, bis das DOM geladen ist, oder werden Bild-Assets nicht als Teil davon betrachtet? – simmonson

Es sollte mit Zurückstellungs arbeiten = –

„verschieben“, das ist das, was ich habe, wie oben in meiner Frage gezeigt. Ich bin also nicht sicher, warum es eigentlich nicht "aufschiebt". – simmonson

Warum gibt naturalHeight oder naturalWidth `undefined` zurück?

Antwort

Verwandte Themen