Pourquoi naturalHeight ou naturalWidth renvoient `undefined`?

Mon affectation de classe veut que j'utilise la balise defer pour le script auquel je fais référence, mais cela entraîne que l'image naturalWidth ne soit pas définie en raison de l'ordre d'exécution dans mon fichier js.Pourquoi naturalHeight ou naturalWidth renvoient `undefined`?

Mon HTML a cette ligne dans la tête (affectation me veut le mettre dans le <head> mais utiliser defer="defer") <script src="scripts/script.js" defer="defer"></script>

Mes js:

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

J'ai donc essayé ceci:

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`

Je pense que l'affectation de birdImage.width est indéfinie parce que cette ligne de code ru ns avant catImage.onload se passe réellement. Est-ce que cela signifie que je suis esclave de l'attribution de birdImage.width dans le cadre de la function de catImage.onload?

P.S. J'ai essayé ES6 de catImage.onload =() => { //block of code } mais cela n'a pas semblé fonctionner.

Source

2017-06-11 simmonson

Est-ce que cela signifie que je suis esclave d'attribuer birdImage.width dans le cadre de la fonction de catImage.onload?

On dirait que c'est la meilleure façon de le faire.

Vous pouvez utiliser une fonction de flèche, mais pas avec le mot-clé this pour référencer l'image.

ne fonctionne pas:

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

Parce que la fonction flèche l'objet this ne se lie pas à la référence de l'image, il fait référence this de la portée externe.

fonctionne le:

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

Ou:

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

Source

2017-06-11 03:20:36

Le problème est que vous essayez d'accéder à une variable hors de portée.

S'il vous plaît donner à ce essayer:

<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>

Source

2017-06-11 03:33:24

Cela doit encore arriver même si je le 'defer' tag? Je pensais que reporter le script attendait que le DOM ait fini de charger, ou bien les éléments d'image ne sont-ils pas considérés comme faisant partie de celui-ci? – simmonson

Il devrait fonctionner avec defer = "reporter" –

c'est ce que j'ai, comme indiqué ci-dessus dans ma question. Donc, je ne suis pas sûr pourquoi il ne «différerait» pas. – simmonson

Pourquoi naturalHeight ou naturalWidth renvoient `undefined`?

Répondre

Questions connexes