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

Question

我使用的是这样的东西:

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

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

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

有什么想法吗？

Answer 1

取自load()的文档

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

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

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

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

它没有正确地冒泡DOM树

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

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

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

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

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