javascript 如何在文档准备好和图像加载后调用函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7381603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call function after document ready AND image load?
提问by HappyDeveloper
I was using something like this:
我正在使用这样的东西：
$(document).ready(function() {
$('#my-img').load(function() {
// do something
});
});
But sometimes it fails to execute the second callback (without throwing any errors, so there's nothing to do there), and I'm thinking that maybe the image is being loaded before the document is ready.
但有时它无法执行第二个回调（没有抛出任何错误，所以没有什么可做的），我想也许图像在文档准备好之前就被加载了。
If I don't use the $(document).ready() part, it works fine, so I think I'm gonna leave it that way for now. But someone told me that it was a good practice to always do this kind of thing as a callback on document ready, because the document might not be ready. Is that right?
如果我不使用 $(document).ready() 部分，它就可以正常工作，所以我想我暂时不会这样做。但是有人告诉我，总是将这种事情作为文档就绪的回调来做是一个很好的做法，因为文档可能还没有准备好。是对的吗？
Any thoughts?
有什么想法吗？
回答by Tchami
Taken from the documentation on load()
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
****Can cease to fire for images that already live in the browser's cache****
与图像一起使用时加载事件的注意事项
开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载后执行函数。有几个已知的警告应该注意。这些是：
它不能始终如一地工作，也不能可靠地跨浏览器
如果图像 src 设置为与以前相同的 src，则它不会在 WebKit 中正确触发
它没有正确地冒泡 DOM 树
****可以停止为已经存在于浏览器缓存中的图像触发****
Especially the latter is a common problem.
尤其是后者是一个普遍的问题。
You might try the imagesLoaded plugin, but I've had better luck with the following approach:
您可以尝试使用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
It's dirty, but if you really need to perform some action after the image has loaded this has been the only reliable approach I've been able to get to work.
它很脏，但如果你真的需要在图像加载后执行一些操作，这是我能够开始工作的唯一可靠方法。
回答by richplane
Old question but may be useful to googlers: If you need code to execute after images are loaded, and the images are in the DOM, you should use $(window).load instead of $(document).ready. As in:
老问题，但可能对谷歌人有用：如果您需要在加载图像后执行代码，并且图像位于 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
});
This is vital if doing any jiggerypokery with SVGs or other embedded documents.
如果使用 SVG 或其他嵌入文档进行任何 jiggerypokery，这至关重要。
