jQuery：文档就绪对于我的要求过早触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2034810/
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
jQuery: document ready fires too early for my requirements
提问by user239237
I am developing a site based all around photos. Some areas of this site require calculations based on image dimensions in order to work correctly. What i have found is that document ready is firing too early and my gui is behaving erratically as a result.
我正在开发一个基于照片的网站。本网站的某些区域需要根据图像尺寸进行计算才能正常工作。我发现文件准备好过早触发，结果我的 gui 行为不正常。
I removed the document ready function and replaced it with the good 'ol window.onload function, since, if i read correctly, this function does not fire until images are fully loaded.
我删除了文档就绪函数，并用好的 'ol window.onload 函数替换了它，因为如果我正确阅读，这个函数在图像完全加载之前不会触发。
My question is, will this cause any problems? And are there any other solutions that i have missed perhaps?
我的问题是，这会导致任何问题吗？还有我错过的其他解决方案吗？
Thanks for the help guys!!
感谢各位大侠的帮助！！
回答by Corey Ballou
There is no reason you cannot use $(window).load()as opposed to $(document.ready(). You are correct about the function not firing until images are fully loaded (or failed to load).
没有理由不能使用$(window).load()，而不是$(document.ready()。您对在图像完全加载（或无法加载）之前不会触发的功能是正确的。
The drawback of fully relying on $(window).load()are that in some cases it is readily apparent none of your javascript is working (i.e. navigationor click events) until every single item on your page has loaded. Some users, usually a website's power users, click through pages quite rapidly and this detracts from the overall user experience.
完全依赖的缺点$(window).load()是，在某些情况下，很明显，在页面上的每个项目都加载之前，您的任何 javascript 都无法正常工作（即导航或点击事件）。一些用户，通常是网站的高级用户，点击页面的速度非常快，这会降低整体用户体验。
The happy mediumwould be to use $(window).ready()for most situationsandonly put events inside $(window).load()that absolutely require them.
在幸福中。将使用$(window).ready()在大多数情况下和里面只放事件$(window).load()是绝对需要它们。
回答by JCasso
Try this instead:
试试这个：
$(window).load(function() {
alert("images are loaded!");
});
See this link for a comparison of $(document).ready()and $(window).load()
请参阅此链接以比较$(document).ready()和$(window).load()
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
回答by metrobalderas
Altough window.onloadwould suit your needs, I'd recommend speeding up the things a bit:
Altoughwindow.onload会满足您的需求，我建议加快事情有点：
$("img.load").load(function(){
alert($(this).width());
});
Now you can process image individually as quickly as it is loaded and not waiting for the whole set of elements.
现在，您可以在加载图像时单独处理图像，而无需等待整个元素集。
回答by trusktr
Here's a very simple solution:
这是一个非常简单的解决方案：
Include the width=""and height=""attributes for all images. This will force the browser to render everything correctly and in place even before images are loaded. The space required for each image in the page's real estate will be properly set aside while images load.
包括所有图像的width=""和height=""属性。这将强制浏览器在加载图像之前正确地渲染所有内容。加载图像时，页面空间中的每个图像所需的空间将被适当留出。
That's it!
就是这样！
If you do that, document.readywill work just fine in your scenario. What is happening is that the browser doesn't know the size of the images before they are retrieved/loaded, so the browser has to guess. That can cause the funny behavior. Specifying the width and height of your images will solve this problem.
如果你这样做，document.ready在你的场景中会很好地工作。发生的事情是浏览器在检索/加载图像之前不知道图像的大小，因此浏览器必须猜测。这可能会导致有趣的行为。指定图像的宽度和高度将解决这个问题。
I'm surprised no one mentioned that. It is not necessarily a javascript problem, although cballou's answeris definitely good advice.
我很惊讶没有人提到这一点。这不一定是 javascript 问题，尽管cballou 的回答绝对是很好的建议。
Anyway, hope you learned something new. ;)
不管怎样，希望你学到了一些新东西。;)
回答by fmsf
If you want to delay it with an amount of time given maybe you can use "setTimeout" :)
如果您想在给定的时间内延迟它，也许您可以使用“setTimeout”:)
回答by adamse
You could possible use the load()event in jquery, however in the documentation it is mentioned that it might not work as expected if the element already has loaded.
您可以load()在 jquery 中使用该事件，但是在文档中提到如果元素已经加载，它可能无法按预期工作。
Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded. -- http://docs.jquery.com/Events/load
注意： load 只有在元素完全加载之前设置它才会起作用，如果在元素完全加载之后设置它，则不会发生任何事情。这不会发生在 $(document).ready() 中，jQuery 处理它以按预期工作，在 DOM 加载后设置它时也是如此。-- http://docs.jquery.com/Events/load
