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

发布于 2024-12-29 18:03:18 字数 422 浏览 2 评论 0原文

我试图在之前使用以下代码获取元素宽度，

<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 加载，因此当文档准备就绪时应该已就位。我做错了什么？

原文

I am trying to obtain an element width using the following code just before the </body>

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

but it logs undefined. However, if I run $('div.canvas img.photo').get(1).width directly in the Chrome/Firebug console, it returns the correct width. The image is not being loaded with Javascript, so should be in place when the document ready fires. What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2025-01-05 18:03:18

不，不应该。 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 自然会延迟脚本的执行，可能是一秒，也可能是十秒，具体取决于客户端连接的速度以及页面上的内容量。如果您执行任何样式设置，这可能会导致不必要的跳跃和抖动。

No, it shouldn't. document.ready fires when all HTML has been loaded, but not the images. If you want to wait until all images are loaded, use window.load.

Example:

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

Also, as some people have pointed out, you were attempting to get the property ".width" twice.

If at all possible, set a width on the imagetags in CSS. That way, you can safely use document.ready for your code. Using window.load will naturally delay the execution of your script, could be a second, could be ten, depending on the speed of the clients connection, and the amount of content on your page. This could cause unwanted jumps and jitters if you're performing any styling.

回复收藏 0 原文

囍孤女 2025-01-05 18:03:18

img 尚未加载到 DOM 上。文档：

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

改成这样：

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

img isn't being loaded on DOM ready. docs:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

change to this:

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

回复收藏 0 原文

灼痛 2025-01-05 18:03:18

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

你可以使用，

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

Image's width would only be available when its loaded completely.
jQuery supports onload event on every images too.

You can use,

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

回复收藏 0 原文

苍景流年 2025-01-05 18:03:18

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