jQuery：文档准备就绪事件对我的要求来说触发得太早了

Question

我正在开发一个以照片为主题的网站。该网站的某些区域需要根据图像尺寸进行计算，以便正确工作。我发现document ready过早触发，导致我的GUI行为不稳定。

我删除了document ready函数，并用经典的window.onload函数代替，因为如果我理解正确，这个函数在图像完全加载后才会触发。

我的问题是，这样做会引起任何问题吗？还有其他解决方案吗？谢谢大家的帮助！！

- user239237

---

这只发生在特定的浏览器中还是所有浏览器中都会出现？ - Agent_9191

Answer 1

您可以使用$(window).load()而非$(document.ready())。您说得很对，该函数要等到图片完全加载（或无法加载）后才会触发。

但是完全依赖$(window).load()也有缺点。在某些情况下，直到页面上的每个项目都加载完成（例如导航或点击事件），才会发现您的javascript未能运行。一些用户（通常是网站的核心用户）会快速浏览页面，这会降低整体用户体验。

最好的办法是大多数情况下使用$(window).ready()，并且只将绝对需要的事件放在$(window).load()中。

- Corey Ballou

Answer 2

不妨试试这个：

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

查看此链接，了解$(document).ready()和$(window).load()的比较。

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

- JCasso

Answer 3

虽然window.onload可以满足您的需求，但我建议稍微加快速度：

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

现在，您可以像加载图像一样快速地单独处理图像，而不必等待整个元素集。

- metrobalderas

Answer 4

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

对所有图像包括width=""和height="" 属性。这将强制浏览器在加载图片之前正确地呈现所有内容并放置在正确的位置。在页面的实际空间中，每个图像所需的空间将在加载图像时得到适当的设置。

就是这样！

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

我很惊讶没有人提到过这一点。这不一定是javascript的问题，尽管cballou's answer绝对是很好的建议。

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

- trusktr

Answer 5

您可以尝试使用jQuery中的load()事件，但是文档中提到，如果元素已经加载完成，则可能无法按预期工作。

注意：load只在元素完全加载之前设置才能起作用，如果在加载完成后设置，将不会发生任何事情。这在$(document).ready()中不会发生，因为jQuery处理它以按预期工作，即使在DOM加载后设置它也一样。 -- http://docs.jquery.com/Events/load

- ase

Answer 6

如果您想延迟一段给定的时间，可以使用 "setTimeout" :)

- fmsf