Question

简单代码：

$(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。

Answer 1

在jQuery中$(document).ready()在加载DOM时运行代码（不包含图像），$(window).load()在加载所有内容时运行代码。

简单地说，图像宽度为0，因为它没有在代码运行时加载。

请改用$(window).load()。

Answer 2

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

Answer 3

因为在图像加载之前不知道宽度。

正如W3C建议的那样，您应为width设置height和<img>属性，以便在图像加载完成之前显示（和已知）正确的宽度和高度。如果你有一个非常大的图像，你的布局可以完全搞砸，因为它在加载之前没有占用任何空间。

jQuery .width（）有时会起作用;有时不？

3 个答案: