图片在document.ready上没有宽度

Question

我有一个我希望用来调整图像大小的功能：

http://jsfiddle.net/eUurB/

当我在document.ready上运行它时，它没有任何效果;返回的图像大小是'0'（您可能会注意到它在小提琴中起作用...我不确定是什么导致这种不一致的说实话，但在我的测试网站上它肯定会返回'0'的高度和宽度”。

这是预期的行为吗？如果是这样，我怎么能在图像有宽度时做一个简单的监听器？

Answer 1

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

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

---

• .one('load',...)会在调用时立即删除处理程序。你只需要一次。

• .filter()将返回已加载的图片。如果没有，则不返回任何元素。

• .load()将手动调用处理程序。仅在图像已加载时才会出现此情况。

---

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

Answer 2

图像未在document.ready时加载。而是使用.load() method of jQuery。

$('#logo').load( function() {
    resizeImgByArea('logo', 500);
});

Answer 3

来自jQuery(callback)方法的jQuery docs：

  

此功能的行为与$(document).ready()

类似

当我们转到docs on $(document).ready()时，我们会发现：

  

描述：指定在DOM完全加载时要执行的函数。

所以它实际上正在做它应该做的事情。它不等待加载其他资源（如图像）;一旦 DOM 准备好，它就会执行你的回调。

你可以获得<img>元素并附加一个load事件监听器，但如果图像真的 完成加载，然后才能附加它呢？你的回调永远不会被执行。

它不漂亮，但我认为你能做的最安全的事情就是等待整个页面完成加载：

$(window).load(function () {
    resizeImgByArea('logo', 50);
});