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

我使用的是这样的东西：

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

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

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

有什么想法吗？

Answer 1

摘自load（）的文档

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

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

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

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

它没有正确地冒泡DOM树

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

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

您可以尝试使用imagesLoaded插件 ，但我的运气方式更好：

 var element = $('#my-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，这一点至关重要。