jquery - jQuery：document ready 对我的要求来说太早了

Question

我正在开发一个基于照片的网站。本网站的某些区域需要根据图像尺寸进行计算才能正常工作。我发现文档准备就绪太早了，结果我的 gui 行为不正常。

我删除了文档准备功能并将其替换为良好的 'ol window.onload 功能，因为如果我阅读正确，此功能在图像完全加载之前不会触发。

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

谢谢你们的帮助！！

score 51 · Accepted Answer

没有理由不能使用$(window).load()而不是$(document.ready(). 您对在图像完全加载（或加载失败）之前不会触发的功能是正确的。

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

快乐的媒介将用于$(window).ready()大多数情况 ，并且只将 绝对需要它们的事件放入$(window).load()其中。

score 14 · Accepted Answer

试试这个：

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

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

score 8 · Accepted Answer

尽管window.onload可以满足您的需求，但我建议您加快速度：

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

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

score 7 · Accepted Answer

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

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

就是这样！

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

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

不管怎样，希望你学到了一些新东西。;)

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

2

如果您想在给定的时间内延迟它，也许您可以使用“setTimeout”:)

于 2010-01-09T21:26:29.533 回答

6 回答 6