4

我正在尝试使用以下代码获取元素宽度</body>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script>

但它记录未定义。但是，如果我$('div.canvas img.photo').get(1).width直接在 Chrome/Firebug 控制台中运行，它会返回正确的宽度。图像未使用 Javascript 加载，因此应在文档准备好触发时就位。我究竟做错了什么？

4

4 回答 4

6

不，不应该。document.ready 在所有 HTML 已加载时触发，但不是图像。如果您想等到所有图像都加载完毕，请使用 window.load。

例子：

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

此外，正如一些人指出的那样，您试图获得属性“.width”两次。

如果可能，请在 CSS 中为图像标签设置宽度。这样，您就可以安全地将 document.ready 用于您的代码。使用 window.load 自然会延迟脚本的执行，可能是一秒，也可能是十秒，具体取决于客户端连接的速度和页面上的内容量。如果您正在执行任何造型，这可能会导致不必要的跳跃和抖动。

于 2012-01-31T10:30:47.327 回答
1

图像的宽度只有在完全加载后才可用。jQuery 也支持每个图像的 onload 事件。

您可以使用，

$('div.canvas img.photo').load(function(){
  // here the image (or all images which match selector) has been loaded.
}
于 2012-01-31T10:46:53.317 回答
1

img 没有被加载到 DOM 上。 文档：

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

改为：

$(window).load(function(){
            var diff = $('div.canvas img.photo').get(1).width;
            console.log(diff.width);
        });
于 2012-01-31T10:30:59.643 回答
0

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

于 2012-01-31T10:35:57.003 回答