jQuery：文档就绪触发对于我的要求来说太早了
我正在开发一个基于所有照片的网站。本网站的某些区域需要根据图像尺寸进行计算才能正常工作。我发现文档就绪触发得太早，因此我的图形用户界面表现不稳定。
我删除了文档就绪函数，并将其替换为良好的 'ol window.onload 函数，因为，如果我阅读正确，该函数在图像完全加载之前不会触发。
我的问题是，这会导致任何问题吗？还有我可能错过的其他解决方案吗？
谢谢各位的帮助！！
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.
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.
My question is, will this cause any problems? And are there any other solutions that i have missed perhaps?
Thanks for the help guys!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您没有理由不能使用
$(window).load()而不是$(document.ready()。您关于该函数在图像之前不会触发的说法是正确的完全加载（或加载失败）。完全依赖
$(window).load()的缺点是，在某些情况下，很明显您的 JavaScript 没有工作（即 导航或点击事件），直到页面上的每个项目都加载完毕。某些用户（通常是网站的高级用户）会非常快速地点击页面，这会降低整体用户体验。折中办法是在大多数情况下使用
$(window).ready()和 只将绝对需要的事件放入$(window).load()中。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).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. navigation or 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.The happy medium would be to use
$(window).ready()for most situations and only put events inside$(window).load()that absolutely require them.请尝试以下操作：
请参阅此链接以了解
$(document).ready()和$(window).load()http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
Try this instead:
See this link for a comparison of
$(document).ready()and$(window).load()http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
尽管
window.onload可以满足您的需求，但我建议稍微加快速度：现在您可以在加载图像时单独处理图像，而不必等待整个元素集。
Altough
window.onloadwould suit your needs, I'd recommend speeding up the things a bit:Now you can process image individually as quickly as it is loaded and not waiting for the whole set of elements.
这是一个非常简单的解决方案：
包含所有图像的
width=""和height=""属性。这将迫使浏览器即使在加载图像之前也正确且到位地渲染所有内容。加载图像时，页面空间中每个图像所需的空间将被适当留出。就是这样！
如果您这样做，
document.ready将在您的场景中正常工作。发生的情况是浏览器在检索/加载图像之前不知道图像的大小，因此浏览器必须猜测。这可能会导致有趣的行为。指定图像的宽度和高度将解决这个问题。我很惊讶没有人提到这一点。尽管cballou的回答绝对是一个很好的建议，但这不一定是一个javascript问题。
不管怎样，希望你学到一些新东西。 ;)
Here’s a very simple solution:
Include the
width=""andheight=""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.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.I’m surprised no one mentioned that. It is not necessarily a javascript problem, although cballou's answer is definitely good advice.
Anyway, hope you learned something new. ;)
您可以使用 jquery 中的
load()事件，但是在文档中提到，如果元素已经加载，它可能无法按预期工作。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.如果你想延迟一段给定的时间，也许你可以使用“setTimeout”:)
If you want to delay it with an amount of time given maybe you can use "setTimeout" :)