Javascript 如何仅为需要超过一定时间加载的网页实现页面加载程序动画？

通过在JavaScript中调用window.onload（），我的页面加载程序动画目前正在成功运行，但我想调整代码，使加载程序动画仅在网页加载时间超过一定时间时触发。我试图避免在用户每次导航到新页面时显示动画，并且仅在必要时显示动画

下面是我当前的HTML、CSS和JS代码，如果有帮助的话

HTML:

JavaScript:

window.onload = function() {
    const loader = document.querySelector(".loader")
    loader.classList.add("fade-out")
}

---

非常感谢您提供的任何帮助

你可以试试这个，但我不是100%确定。基本上，将所有html转换为文本并将其注入根div；如果找不到最慢的内容，请有条件地加载页面加载程序，然后再次检查，直到找到淡入淡出的加载程序

window.onload=function（）{
让您的内容=`
您网站的内容：
内容A
内容B
内容C
`
让加载器=`
`;
let wrap=document.getElementById（“加载程序wrap”）；
让root=document.getElementById（“root”）；
//切换这些以进行加载程序渲染
root.innerHTML=yourContent；
//setTimeout（（）=>root.innerHTML=yourContent，1000）；
let interval=setInterval（（）=>{
日志（“检查…”）
if（root.children[0]）{
let check=document.getElementById（“check”）
如果（check.textContent==“Content C”）{
const loader=document.querySelector（“.loader”）；
if（loader）loader.classList.add（“淡出”）；
//别忘了清理它
间隔时间；
控制台日志（“完成”）
}
}否则{
如果（！wrap.children[0]）wrap.innerHTML=loader；
}
},100)
}

.loader{
位置：固定；
排名：0；
左：0；
z指数：1001；
宽度：100%；
身高：100%；
背景：var（--bg颜色）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.加载gif{
宽度：100px；
}
.淡出{
动画：淡出1s；
动画填充模式：正向；
}
@关键帧淡出{
100% {
不透明度：0；
可见性：隐藏；
}
}

---

总之，这是不可能的。要实现此效果，您需要提前知道客户端下载您的网页的速率以及网页初始呈现所需的资产。由于影响网络状况的变量太复杂，您无法知道，甚至无法可靠地预测客户端的下载速率。例如，最终用户在下载您的网页时可能会进入隧道，导致可用下载带宽突然和不可预测地减少，或者最终用户设备上的其他应用程序可能会发出网络请求，与正在进行的下载争夺带宽

要估计这种影响，最好使用

XMLHttpRequest

的

onprogress

事件来确定当前下载速率和要传输的资产的大小，以计算资产何时完成下载，前提是下载速率保持不变

下面是一个片段，您可以使用它来了解如何近似效果

const xhr = new XMLHttpRequest();
xhr.open('GET', '/myasset.json}', true);

xhr.onprogress = e => {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete, 'percentComplete');
    }
}

xhr.onload = function() {
        console.log("loaded");
}

xhr.send();

---

帕夫洛斯，非常感谢你的回复！除非我有误解，在window.onload函数中包含setTimeout（）检查，我们不是简单地在GIF动画消失之前添加setTimeout（）设置的时间量吗？换句话说，难道不是所有的DOM元素（包括id为“check”的元素）都已经加载以触发window.onload吗？您的评估是正确的；我专注于一个缓慢的元素，而不是整个页面。我又试了一次（见我的答案）。非常感谢，帕夫洛斯。我将尝试一下你推荐的方法，看看是否能达到预期的效果。我很感激你对这件事的看法。非常感谢，尼尔！你的解释很有道理。我决定简单地缩短页面加载淡出动画的持续时间，这样当页面加载非常快时，效果几乎不明显。我非常感谢您抽出时间回复并分享您的见解！

window.onload = function() {
    const loader = document.querySelector(".loader")
    loader.classList.add("fade-out")
}

const xhr = new XMLHttpRequest();
xhr.open('GET', '/myasset.json}', true);

xhr.onprogress = e => {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete, 'percentComplete');
    }
}

xhr.onload = function() {
        console.log("loaded");
}

xhr.send();