なぜnaturalHeightまたはnaturalWidthは `undefined`を返しますか？

私のクラス割り当てでは、私が参照しているスクリプトにdeferタグを使用したいと考えていますが、これは画像のnaturalWidthがjsファイルの実行順序のために未定義になります。なぜnaturalHeightまたはnaturalWidthは `undefined`を返しますか？

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

だから私はこの試みた：

を

私のHTMLは <script src="scripts/script.js" defer="defer"></script>

私のJS（割り当てがdefer="defer"を<head>にそれを置くが、使用するために私を望んでいる）の頭の中でこのラインを持っています

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`

birdImage.widthの割り当ては、このコード行ru ns前にcatImage.onload実際に発生します。これは、私がをfunctionの範囲内に割り当てることを奴隷にしていることを意味しますか？catImage.onload？

P.S.私はcatImage.onload =() => { //block of code }のES6を試みたが、これは動作していないようだ。

出典

2017-06-11 simmonson

birdImage.widthをcatImage.onloadの機能の範囲内に割り当てることは、私が奴隷であることを意味しますか？

そう、それを行う最良の方法です。

矢印機能を使用できますが、thisキーワードでは画像を参照できません。

は動作しません：矢印機能にthisオブジェクトが画像の参照に結合しないので

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

、それは外側のスコープのthisを参照します。

が作業を行います。

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

または：

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

出典

2017-06-11 03:20:36

問題は、スコープの外の変数にアクセスしようとしているということです。

これを試してみてください：

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

出典

2017-06-11 03:33:24

をこれはまだ私は 'defer'タグを持っているにもかかわらず発生する必要がありますか？私は、DOMがロードを完了したか、またはイメージアセットがその一部とはみなされないのを待機するスクリプトを延期すると思ったのですか？ – simmonson

上記の私の質問にあるように、defer = "defer" –

で動作するはずです。だからなぜそれが実際に「延期」しないのか分からない。 – simmonson

なぜnaturalHeightまたはnaturalWidthは `undefined`を返しますか？

答えて

関連する問題