文档就绪时元素宽度未定义

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> 

但它记录未定义。 但是，如果我直接在Chrome / Firebug控制台中运行$('div.canvas img.photo').get(1).width ，它将返回正确的宽度。 图像没有加载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自然会延迟脚本的执行，可能是一秒钟，可能是十秒，具体取决于客户端连接的速度以及页面上的内容量。 如果您正在执行任何样式，这可能会导致不必要的跳跃和抖动。

Answer 2

img没有在DOM上加载。 docs ：

虽然JavaScript提供了在呈现页面时执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。 在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。 传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。 使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要。

改为：

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

Answer 3

图像的宽度仅在完全加载时才可用。 jQuery也支持每个图像上的onload事件。

您可以使用，

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

Answer 4

问题是，当您尝试获取其尺寸时，您的图像尚未加载。 为了使它能够将代码包装到$(window).load 。 或另一种选择。 如果您知道图像的大小，您可以提供width和height属性，那么它甚至可以在DOMContentLoaded内部工作。 有时它更可取，因为onload事件需要更长时间来触发'DOMContentLoaded'。 否则你需要使用$(window).load .load，请参阅@Andreas Carlbom的回答。