jquery - $(document).ready() 图像超时

Question

使用 jQuery 时，您需要等待 DOM 准备就绪，然后再开始做事。我的问题是图像。

有时图像需要很长时间才能加载，而且通常根本不需要。所以我希望 ready() 基本上有一个超时。它将等待大约 5 秒，如果这些选定的图像尚未加载，它将运行该功能。

这可能吗？

Answer 1

我想你可能混淆了 document.ready 和 window.onload

窗口.onload

这是一个在页面完成加载后触发的事件。所以这个功能不适合你，因为你需要等待所有图像完成下载（或超时）

文档就绪

这是一个将在 DOM 准备好后触发的事件。这是浏览器实际构建页面但仍可能需要抓取一些图像或 Flash 文件的时候。这个函数将是你所追求的，因为在所有图像下载之前 DOM 已经准备好进行操作。

您可以在此函数中设置一个计时器等待 5 秒，然后检查您是否下载了所述图像

进一步阅读

示例代码：

<script>
    $(document).ready(function() {
        var imagesLoaded = false;
        var imagesTimer = setTimeout("alert('images failed to load')", 10000);

        $("img.checkme").load(function(){
            imagesLoaded = true;
            clearTimeout(imagesTimer);
            alert('images loaded within 10 seconds')
        });
    });
</script>

Answer 2

- 编辑：这个答案不是确定的，只是有帮助的。

不理我。这适用于加载后的图像。您希望在呈现它们后立即设置超时。在这种情况下，你会做一些稍微不同的事情。在渲染每个图像时，您将设置一个“启动”超时，如果“加载”在 5 秒之前没有取消它，那么您将启动您想做的任何事情。

但是，可能存在比加载更早的事件，您可以以一般方式附加到该事件。没有把握。

- 老的：

确实，先生，我相信您应该能够附加到 'img' 'load' 事件。

可能是这样的：

// not tested, completely made up
$("img").load({ alert("foo"); });

Answer 3

我有一个jQuery 插件，它等待在选择器的上下文中下载图像，然后触发回调。

所以你可以做...

$('body').waitForImages(function() {
  // Images have loaded.
});