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，请参阅@Andreas Carlbom回答。

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

4 个答案: