javascript - 图像在 document.ready 处没有宽度

Question

我有一个函数，我想用它来调整图像大小:

http://jsfiddle.net/eUurB/

当我在 document.ready 上运行它时，它没有任何效果；返回的图像大小是“0”(您可能会注意到它确实可以在 fiddle 中工作...说实话，我不确定是什么导致了这种不一致，但在我的测试站点上，它肯定会返回“0”的高度和宽度'.

这是预期的行为吗？如果是这样，当图像有宽度时，我如何制作一个简单的监听器？

Answer 1

这是一种 super 安全的方法，不需要等待所有图像加载，并且可以处理在 DOM 准备好之前图像可能被缓存或完成加载的情况。

$('#my_img').one('load',function(){
    resizeImgByArea('logo', 50);
})
  .filter(function(){
     return this.complete;
})
  .load();

<小时/>

• .one('load',...) 在调用处理程序后立即将其删除。您只需要一次。

• .filter() 将返回图像(如果已加载)。如果不是，则不返回任何元素。

• .load() 将手动调用处理程序。仅当图像已加载时才会发生这种情况。

<小时/>

因此，如果在 DOM 准备好之前预加载图像，我们将手动调用其 .load() 处理程序。如果没有，它的处理程序将在加载时被调用。