jQuery：文档准备好了，因为我的要求太早了

我正在开发一个基于所有照片的网站。此站点的某些区域需要基于图像尺寸进行计算才能正常工作。我所发现的是，准备好文件的时间太早了，因此我的gui表现不正常。

我删除了文档就绪函数并用好的’ol window.onload函数替换它，因为如果我正确读取，则在图像完全加载之前不会触发此函数。

我的问题是，这会导致任何问题吗？还有其他我可能错过的解决方案吗？

谢谢你的帮助！

没有理由你不能使用$(window).load()而不是$(document.ready() 。你是正确的，直到图像完全加载（或加载失败）之前不会触发的函数。

完全依赖$(window).load()的缺点是，在某些情况下很明显，在页面上的每个项目都加载之前，你的javascript都没有工作（即导航或点击事件 ）。某些用户（通常是网站的超级用户）非常快速地点击页面，这会降低整体用户体验。

幸福的媒介是在大多数情况下使用$(window).ready() 并且 只将事件放在绝对需要它们的$(window).load()中 。

试试这个：

 $(window).load(function() { alert("images are loaded!"); });

有关$(document).ready()和$(window).load()的比较，请参阅此链接

Altough window.onload将满足您的需求，我建议加快一些事情：

 $("img.load").load(function(){ alert($(this).width()); });

现在，您可以在加载图像时单独处理图像，而不是等待整个元素集。

这是一个非常简单的解决方案：

包括所有图像的width=""和height=""属性。这将迫使浏览器在加载图像之前正确地渲染所有内容。在图像加载时，页面的不动产中所需的空间将被适当地留出。

而已！

如果你这样做， document.ready将在你的场景中正常工作。发生的事情是浏览器在检索/加载之前不知道图像的大小，因此浏览器必须猜测。这可能会导致有趣的行为。指定图像的宽度和高度可以解决此问题。

我很惊讶没有人提到这一点。它不一定是一个javascript问题，虽然cballou的回答肯定是好建议。

无论如何，希望你学到新东西。 ;）

您可以在jquery中使用load()事件，但是在文档中提到如果元素已经加载，它可能无法按预期工作。

注意：只有在元素完全加载之前设置它才会起作用，如果你设置它之后什么也不会发生。这不会发生在$（document）.ready（）中，jQuery处理它以按预期工作，也就是在DOM加载后设置它。 – http://docs.jquery.com/Events/load

如果你想延迟它给定的时间可能你可以使用“setTimeout”:)