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

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加载的，所以应该在文档准备完毕时就到位了。我做错了什么？

- Mild Fuzz

---

在这两行代码之间添加 console.log(diff);，你就会看到问题出在哪里了。 - Stefan

@Mild Fuzz：console.log(diff.width); // 看起来是打错了 - Riz

дЄЇдїАдєИи¶БдљњзФ® $('div.canvas img.photo').get(1).width иАМдЄНжШѓ $('div.canvas img.photo').eq(1).width()пЉЯ - yunzen

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将自然延迟脚本的执行时间，可能是一秒钟，也可能是十秒钟，这取决于客户端连接的速度和页面上的内容数量。如果您正在执行任何样式，则可能会导致不必要的跳跃和抖动。

- Andreas Eriksson

Answer 2

DOM准备就绪时未加载img。 docs:

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

更改为：

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

- gdoron

Answer 3

当图片完全加载后，其宽度才可用。jQuery也支持每个图像的onload事件。

您可以使用：

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

- Jashwant

---

在将负载附加到图像上时，需要注意一些细节。[文档]（http://api.jquery.com/load-event/） - gdoron

@gdoron 感谢您提供的信息和链接，真的很有帮助。我过去总是在img标签中使用load。我不会再这样做了。 - Jashwant

好的，就像我的回答中所提到的那样，将其附加到文档上即可。 - gdoron

Answer 4

问题在于当您尝试获取图像的尺寸时，图像尚未加载。为使其正常工作，请将代码包装在$(window).load中。或者另一个选项是，如果您知道图像的尺寸，则可以提供width和height属性，然后即可在DOMContentLoaded内部工作。有时这是更可取的，因为onload事件需要比'DOMContentLoaded'更长的时间才能触发。 否则，您需要使用$(window).load，请参见@Andreas Carlbom的答案。

- dfsq