如何*持续*检测页面是否已完全加载 JS？答案

【问题标题】：How to *continuously* detect if a page is fully loaded with JS?如何*持续*检测页面是否已完全加载 JS？
【发布时间】：2016-02-26 12:54:26
【问题描述】：

有很多方法可以检测页面是否已加载。但是我想不断地这样做，但找不到有效的方法。

为了解释持续的意思，让我举个例子。在一个页面中，

用户单击某处并请求加载新图像。这会触发一些图像的缓冲。
JS 代码会自动连续缓冲一些图像。

所以我想检查一下页面中是否没有图片要加载（还有，在下载过程中没有图片）。

[我希望能够了解是否每个图像都已完成下载/缓冲/缓存。这样我就可以请求缓冲新图像。]

我打算在无限次中做括号内的事情，同时限制缓冲图像的数量。

【问题讨论】：

“我计划...无限循环” - 无限循环将锁定页面。使用一个使用 setTimeout() 的函数来安排每 X 毫秒对其自身的另一个调用。
您是否考虑过为您的图片使用 (on)load 事件，以跟踪哪些图片已完成加载？计算正在进行的数量，当该数量低于某个阈值时，您可以开始下一批。
保留一组加载图像，一旦加载完成，就从该数组中删除它们
@Tom，你能为此写一个示例代码吗？如何判断图像是否已加载？另外如何区分缓冲和不可见的图像，以及加载和可见的另一个图像？在这种情况下它们是一样的吗？
@nnnnnn 我不确定“图像的加载事件”是什么。我是初学者，所以如果你能为此编写一个示例代码，那就太好了。

标签： javascript jquery buffering

【解决方案1】：

检查文档是否加载：

$( document ).ready(function() {
  //Your code goes here.
});

检查图片是否加载：

$('img').each(function(i, e){
    var img = new Image();
    img.onload = function() {
        console.log($(e).attr('src') + ' - Loaded!');
        $(e).attr('loaded', true);
    }
    img.src = $(e).attr('src');
});

【讨论】：