元素宽度正好<code></body></code></p> <pre><code><script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var diff = $('div.canvas img.photo').get(1).width; console.log(diff); }); </script> </code></pre> <p>之前对文件准备

Question

我试图获得使用下面的代码元件宽度不确定的，但它会记录不确定。但是，如果我直接在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中设置图片标签的宽度。这样，您可以安全地使用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

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

Answer 4

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

可以使用，

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