文档准备好和图像加载后如何调用函数？答案

【问题标题】：How to call function after document ready AND image load?文档准备好和图像加载后如何调用函数？
【发布时间】：2011-11-14 22:43:03
【问题描述】：

我用的是这样的东西：

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

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

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

有什么想法吗？

【问题讨论】：

标签： javascript jquery image onload

【解决方案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

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

【讨论】：

【解决方案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 或其他嵌入式文档进行任何玩弄游戏，这一点至关重要。

【讨论】：