要素の幅は文書準備

Question

に定義されていない、私はちょうど</body>

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     var diff = $('div.canvas img.photo').get(1).width; 
     console.log(diff); 
    }); 
</script> 

前に、次のコードを使用して、要素の幅を取得しようとしていますが、それは未定義ログに記録します。ただし、$('div.canvas img.photo').get(1).widthをChrome/Firebugコンソールで直接実行すると、正しい幅が返されます。イメージにJavascriptがロードされていないため、ドキュメントの準備ができたら起動する必要があります。私は間違って何をしていますか？

Answer 1

いいえ、そうではありません。 document.readyは、すべてのHTMLがロードされたときに起動しますが、イメージはロードされません。すべての画像が読み込まれるまで待つ場合は、window.loadを使います。

例：一部の人が指摘しているよう

また

$(window).load(function(){ 
    var diff = $('div.canvas img.photo').get(1).width; 
    console.log(diff); 
}); 

、あなたが二回「.width」プロパティを取得しようとしていました。

可能であれば、CSSのimagetagsの幅を設定します。そうすれば、コードに対してdocument.readyを安全に使用できます。 window.loadを使用すると、スクリプトの実行が自然に遅れることがあります。クライアント接続の速度やページ上のコンテンツの量に応じて、10秒になる可能性があります。あなたがスタイリングをしているなら、これは望ましくないジャンプやジッタを引き起こす可能性があります。

Answer 2

imgはDOM準備ができていません。 docs：画像など、すべての資産が完全に受信されるまで

JavaScriptは、ページがレンダリングされるときにコードを実行するためのloadイベントを提供していますが、このイベントがトリガされません。ほとんどの場合、DOM階層が完全に構築されるとすぐにスクリプトを実行できます。 .ready（）に渡されたハンドラは、DOMの準備が整った後に実行されることが保証されているので、他のすべてのイベントハンドラをアタッチして他のjQueryコードを実行するのに最適です。 CSSスタイルプロパティの値に依存するスクリプトを使用する場合は、スクリプトを参照する前に外部スタイルシートまたはスタイル要素を埋め込むことが重要です。これに

変更：

$(window).load(function(){ 
      var diff = $('div.canvas img.photo').get(1).width; 
      console.log(diff.width); 
     }); 

Answer 3

問題は、あなたがそのdimentionsを取得しようとすると、あなたのイメージがまだロードされていないということです。コードを$(window).loadにラップさせるにはまたは別のオプション。イメージのサイズを知っていれば、widthとheightの属性を与えることができます。それはDOMContentLoadedの内部でさえも機能します。場合によっては、onloadイベントが 'DOMContentLoaded'を起動するのに時間がかかるため、これが望ましい場合もあります。 それ以外の場合は、$(window).loadを使用する必要があります。@Andreas Carlbomの回答を参照してください。

Answer 4

イメージの幅は、完全にロードされたときにのみ利用可能です。 jQueryはすべてのイメージでもonloadイベントをサポートしています。

を使用でき

、

$('div.canvas img.photo').load(function(){ 
    // here the image (or all images which match selector) has been loaded. 
}