这个HTML动画页面加载进度是如何实现的(Preloader)

How is this HTML Animated Page Loading Progress achieved (Preloader)?

本文关键字：Preloader 何实现实现动画 HTML 加载这个更新时间：2023-09-26

有很多网站在页面加载时显示加载进度动画。我知道图像onLoad()方法，但似乎不是一些(甚至大多数)采取的方法。然而，每个HTML5页面加载进度预加载器的教程都展示了图像onLoad()方法。

所以我的具体问题是，他们如何控制他们的预加载程序?他们如何加载和测量数据的加载?或者他们是在伪造加载过程，只是在制作虚假的进度动画?如果是这样，为什么在随后的刷新中进度图形/页面加载速度要快得多?

我在他们的JS文件中挖掘，似乎他们正在使用一个补间库和某种暗示精灵使用的Blitter()对象，但这让我与预加载器进度图的相关性感到困惑。我不明白这是怎么回事。

有没有人愿意帮助我确切地了解他们正在采取什么方法来让他们的预加载器工作?给我总结一下。:)

您必须使用requires或其他脚本加载器异步加载所有脚本，对于您的图像也是如此，这样您可以监控进度。然后创建自定义加载条。他们使用的一个可以很容易地通过重叠PNG图像和白色背景div来实现，在每个进度步骤中增加其宽度。