3

簡単なコード：

$(document).ready(function(){
    console.log($('.slide-background').width());
});

シンプルなhtml：

<div class="testdiv">
      <img class="slide-background" src="img/slide.png"/>
</div>

単純なCSSと同様に：

        body {
            margin: 0; padding: 0;
            height: 100%; width: 100%;
        }

        html {
            margin: 0; padding: 0;
            height: 100%; width: 100%;
        }   
        .testdiv {

            overflow: hidden;
            width: 100%; 
            height: 100%; 
            background-color: black;
        }

一体なぜそれはそれが望むときはいつでも幅を出力するのですか？幅が実際にログに記録されることもありますが、ほとんどの場合、0が返されます。

4

3 に答える 3

7

jQuery では$(document).ready()、DOM がロードされたときにコードが実行され (画像は含まれません)、$(window).load()すべてがロードされたときにコードが実行されます。

簡単に言えば、コードが実行されている時点で画像が読み込まれていないため、画像の幅は 0 です。

$(window).load()代わりに使用してください。

于 2013-02-04T14:22:36.327 に答える
5

DOM の準備はできていますが、画像はまだブラウザによってレンダリングされています。

var $image = $('.testdiv img');

var img = new Image();          // in memory image
img.src = $image[0].src;        // set SRC
img.onload = function(){        // as soon it's loaded
   alert( img.width ) ;         // WORKS!
}
于 2013-02-04T14:21:33.283 に答える
3

画像が読み込まれるまで幅がわからないためです。

W3C が推奨しているように、画像の読み込みが完了する前に正しい幅と高さが表示されるように (そして認識されるように)、widthとのheight属性を設定する必要があります。<img>画像が非常に大きい場合、画像が読み込まれる前にスペースを占有しないため、レイアウトが完全に台無しになる可能性があります。

于 2013-02-04T14:21:19.417 に答える