Jquery 如果页面加载速度足够快，是否可能不触发脚本？

这里有一些背景

我有一个移动网站，在那里我设置了一个覆盖整个页面内容的iOS微调器和白色屏幕的覆盖层。在document.ready上，微调器和屏幕立即显示并显示，直到页面内容完全加载–此时屏幕和微调器逐渐消失，显示页面内容

这一切都很好。但是，如果页面加载速度足够快，我希望对脚本稍加润色，而不显示覆盖和微调器。这些页面中的许多都非常轻量级（如果用户以前访问过这些页面，那么它们以前是缓存的），并且有一个spinner&overlay瞬间闪烁一秒钟或更短的时间是无用的，并且可能会令人困惑。然而，当一个页面的加载时间超过几秒钟时，使用它有很大的价值

我试图找到一种方法，仅当页面加载时间超过一秒钟时才执行脚本。起初，我认为我可以简单地告诉脚本等待一秒钟执行，但在这样做时，当DOM构建页面的html结构时，用户会看到内容一闪而过——如果没有在一秒钟内完成所有资产，则会隐藏内容

显然，这会让用户感到困惑，是不可接受的

另一种方式是，“如果页面被快速缓存/加载，不要显示微调器和覆盖。否则，继续显示它。”

有没有办法做到这一点

以下是我目前正在使用的代码（这是利用jquery和spin.js）：

//调用spin.js
$（文档）.ready（函数（）{
变量$OverlyScreen=$（''）；
$（'body'）.append（$overlyscreen）；
变量选项={
lines:13，//要绘制的行数
长度：7，//每行的长度
宽度：4，//线条粗细
半径：10，//内圈的半径
旋转：0，//旋转偏移量
颜色：'#000'、//#rgb或#rrggbb
速度：1，每秒//圈
轨迹：60，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:true，//是否使用硬件加速
className:'微调器'，//要分配给微调器的CSS类
zIndex:2e9，//z索引（默认为2000000000）
top:'自动'，//在px中相对于父对象的top位置
左：“自动”//在px中相对于父对象的左位置
};
var target=document.getElementById（'pageLoader'）；
var微调器=新微调器（opts）。微调（目标）；
});
//检查页面是否已加载。如果有，则隐藏loader div
$（窗口）。加载（函数（）{
$（'#pageLoader'）.addClass（'loadComplete'）；
});

问题是，在加载页面之前，您无法检查加载页面所需的时间。唯一的方法是延迟显示加载微调器大约1到1.5秒，如果页面在显示微调器之前已完成加载，则清除该延迟。这是我能想到的唯一可行的方法

$(document).ready(function() {
    var overlayTimer = setTimeout(function() { 
        $('<div id="pageLoader" class="overlay pageLoad"></div>').appendTo('body');
    }, 1500);

    // other code for the spinner here

    $(window).load(function() {
        clearTimeout(overlayTimer);
        $('#pageLoader').addClass('loadComplete');
    });
});

$（文档）.ready（函数（）{
var overlayTimer=setTimeout（函数（）{
$（''）。附于（'正文'）；
}, 1500);
//这里是微调器的其他代码
$（窗口）。加载（函数（）{
clearTimeout（overlymer）；
$（'#pageLoader'）.addClass（'loadComplete'）；
});
});

---

这是我能想到的唯一适合你需要的情况的东西。这不是最好的解决方案，因为如果需要显示微调器，在显示微调器之前仍会有1.5秒的延迟。

除了下面列出的选项之外，我能想到的唯一其他选项是检查页面是否已缓存。有点老套，但可能对你有用。看这个：我也在想类似的事情。我喜欢那篇文章的暗示方式。我一直在考虑删除一个临时cookie，如果用户返回，检查是否存在该cookie–如果存在，用户以前就已经存在过，加载程序不应该加载；否则，删除cookie并显示加载程序。我的一些同事建议，这不可能在所有情况下都起作用，因为我们网站上的页面经常返回新内容。仅仅因为用户以前访问过某个特定页面并不意味着没有新数据要加载…所以这就扼杀了这个想法。谢谢大罗斯。我也得出了同样的结论，这很不幸，因为这不一定能帮助我解决这个特殊的问题。不过，我感谢您的反馈和见解！

$(document).ready(function() {
    var overlayTimer = setTimeout(function() { 
        $('<div id="pageLoader" class="overlay pageLoad"></div>').appendTo('body');
    }, 1500);

    // other code for the spinner here

    $(window).load(function() {
        clearTimeout(overlayTimer);
        $('#pageLoader').addClass('loadComplete');
    });
});