在页面内容显示之前计算并显示加载动画的网页加载量答案

【问题标题】：Calculate and display the amount of webpage loaded as a loading animation before the page content is displayed在页面内容显示之前计算并显示加载动画的网页加载量
【发布时间】：2021-09-26 07:58:17
【问题描述】：

所以，我只是在创建一个新的 eLearning 网站，但问题是它的加载速度有点慢，所以我想显示一个类似于 this 的加载动画，但它仅适用于图像。是否可以使用普通 Javascript 或其任何库/框架计算并显示整个文档的加载百分比作为加载动画？

我相信应该是这样的：

<head>
    <script src="path/to/loading.js"></script>
</head>

该网页与任何普通网站一样有许多嵌套的 div 元素。那么，是否可以将链接中给出的代码转换为以某种方式检查加载的 div 标签的数量而不是加载的 img 标签的数量？

或者如果页面打开，加载动画达到 30% 到 60% 之间的随机整数，并且在第一秒，然后每隔 0.5 秒左右，它会增加一个随机量（比如 3 % 到 10%），然后如果页面仍未加载，动画会在 99% 处暂停并保持在那里直到页面加载？加载后，它可以消失并且可以显示内容。但是，如果页面在动画播放时被加载，则动画应立即达到 100% 并结束并显示页面内容。

【问题讨论】：

渲染 DOM 通常是即时的，为此使用加载指示器将毫无意义。理想情况下，您需要找到慢的地方，也许您有很多库，其中很多库可能会延迟加载，很多大图像也可能会产生影响。我建议在开发者模式下查看网络选项卡，看看花费了哪些时间。
@Keith 我知道，但我这样做是为了一个大学项目，他们想要更多的页面和功能，所以我认为加载是一个非常好的主意。我将缩小文件以使其稍后更快。但我需要第一阶段评估的加载动画。无法在此处缩小文件，并且包含大量视频的页面需要很长时间（大约 2 秒）才能加载。如果我只为一页这样做，那么为什么不把它也放在所有其他页面中

标签： javascript html css loading dom-manipulation

【解决方案1】：

我认为您正在寻找的是“window.onload”
它将等待所有加载（图像脚本样式）触发

或者您可以先发送页眉和页脚，然后发送 ajax 内容
但是如果你想要“显示进度”不精确，我认为它只是提示用户现在正在加载

$(()=>{
   //Create loader
})
$(window).on("load",()=>{
    //Remove loader
})

【讨论】：

这不会做任何接近 OP 要求的事情，它只是允许在加载完成时运行 JS。您也许可以使用它来删除某种不依赖于当前加载百分比的加载微调器，但其他答案已经涵盖了这一点。
但是他的详细要求是他的页面有大量的视频。我认为他应该等到视频加载完毕。 PS 没有加载 DOM 时，页面什么都没有

【解决方案2】：

我还没有实现任何显示百分比的加载动画，但我不确定这样做是否是个好主意。查看此视频：https://www.youtube.com/watch?v=iZnLZFRylbs

您可以为整个页面实现默认加载器（在引导程序中称为微调器），并在文档准备好时删除加载器

document.addEventListener('DOMContentLoaded', () => {
   //REMOVE THE LOADER HERE
});

或者jquery

$( document ).ready(function() {
   //REMOVE THE LOADER HERE
});

查看document.readyState了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

【讨论】：