Question

我使用的是这样的东西：

$(document).ready(function() {
  $('#my-img').load(function() {
    // do something
  });
});

但有时它无法执行第二次回调（没有抛出任何错误，因此没有任何事情可做），我想也许图像是在文档准备好之前加载的。

如果我不使用$（document）.ready（）部分，它可以正常工作，所以我想我现在就会这样离开。但是有人告诉我，总是做这样的事情作为文件准备回调是一个好习惯，因为文档可能还没准备好。是吗？

有什么想法吗？

Answer 1

取自documentation on load()

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能一致地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，它在WebKit中无法正确触发

它没有正确地冒泡DOM树

****对于已经存在于浏览器缓存中的图像，可以停止激活****

特别是后者是一个常见问题。

您可以试试imagesLoaded plugin，但我的运气方法更好：

var element = $('#my-img');
$("<img/>").load(function () { //create in memory image, and bind the load event
    //do something
    //var imageHeight = this.height;
}).attr("src", element.attr("src"));
//set the src of the in memory copy after binding the load event, to avoid WebKit issues

它很脏，但是如果你真的需要在图片加载后执行一些动作，这是我能够开始工作的唯一可靠方法。

Answer 2

旧问题但对googlers可能有用：如果您需要在加载图像后执行代码，并且图像在DOM中，则应使用$（window）.load而不是$（document）.ready。如：

$(window).load(function() {
    console.log("My image is " + $('#my-img').width() + " pixels wide.");
    // You may not have known this before the image had loaded
});

如果使用SVG或其他嵌入式文档进行任何jiggerypokery，这一点至关重要。

如何在文件准备好和图像加载后调用函数？

2 个答案: