如何获得进度条加载正文内容并以 100% 隐藏？答案

【问题标题】：How get a progress bar load body content and hide at 100%?如何获得进度条加载正文内容并以 100% 隐藏？
【发布时间】：2016-01-01 20:45:31
【问题描述】：

我正在寻找一种方法来获取加载我的正文文件的进度条，并与它同步，就像当我的所有身体都已加载时，我的进度条处于 100% 并隐藏...只是一个看起来像的简单条：https://yearinmusic.spotify.com/ 但我不想仅将 tweenlite 用于我的进度条。是否存在仅使用 jquery 获取它的可能性？但不是 jquery ui 进度条我实际上想让我自己的进度条加载尽可能少的插件。

【问题讨论】：

您好，请查看How to Ask 了解如何改进您的问题。
是的，它很容易 -- jsfiddle.net/8bxcndmk -- 酒吧很容易。您需要知道如何在下载时以 % 为单位进行进度，例如一次下载 10 个文件 /100% = 10%。如果您的身体中有图像，则可以使用imagesloaded.desandro.com
我的图像实际上在我的 css 中的背景图像中，所以对于我的例子，我必须加载：我的 css + jquery + ajax.js + main.js 所以 25%
嗯，您可以动态加载脚本，因此您需要直接将 css 样式和 JavaScript 放入 html 页面来为栏设置动画。随着每个文件的附加，您可以将栏增加 25% -- naveensnayak.wordpress.com/2013/06/26/…
好的，我为您创建了一个粗略的演示。这是用于加载文件，但我猜它不准确，因为它只是附加文件。最好的方法是使用加载的图像并通过参考框架进行 - jsfiddle.net/jw36g23j -im 在 jquery 移动 css 中加载，所以 reson 为什么有点跳跃。

标签： javascript jquery css load progress-bar

【解决方案1】：

要在侧面完全加载时隐藏对象，您可以使用以下 jquery 代码：

$(document).ready(function(){
    setTimeout(function () {
    $('#yourProgressBar').fadeOut("medium");
    }, 500);
}

以字符串或整数形式传递给fadeOut() 的值决定了淡入淡出动画的过渡持续时间。

setTimeout() 函数添加了一个很好的延迟效果，这样进度条只会在指定的持续时间（这里是 500 毫秒）后淡出。

要制作进度条本身，您必须自己做一个或使用众多插件之一。您已经提到了 jQueryUI 进度条。在我看来，bootstrap 进度条也很不错。 bootstrap 和 jqueryUI 功能的好处是您可以选择要包含的框架/插件的哪一部分，因此您不必包含整个包。

但是，如果您想要超轻量级的东西，以下是如何自己制作进度条的概述：

创建具有设置的相对或绝对宽度的对象进度条。
现在要么操纵进度条的背景，要么在进度条中添加另一个元素并操纵它的长度。
- 如何做到这一点？想想我们的页面需要最长的加载时间。最有可能的图像。您可以通过$("img").addClass("prBar"); 的简单方式为我们html 页面中的所有img-tags 添加一个类。现在，每次这些负载之一时，您都会在您的栏中取得进展。多少？那么进度应该是该栏的宽度除以“prBar”类的元素数。计算如下：var dWidth = $('#yourProgressBar').offsetWidth / $('.prBar').length;

另一个提示：您可以在加载每个元素时增加进度条的宽度，方法是调用 $(".prBar").load(function(){...}); 之类的方法

我希望这可以帮助您构建所需的代码。如果您有任何问题或建议，请随时提出:)

【讨论】：

所以实际上我所有的图像都是我的 css 中的背景图像，所以我可以使用相同的逻辑并在我的 js 和 css 文件中添加一个类吗？
嗯，是的，您可以使用 jquery 将类添加到那些包含背景的对象中。
好的，我会检查一下，因为实际上最大的文件是（带有背景图像的 css、jquery 和我的 main.js 文件）

【解决方案2】：

它们是一些允许制作网页进度条的javascript框架，对我来说，我推荐pace.js和NProgress.js，因为它们非常简单且易于实现

【讨论】：

是的，但是用它自定义进度条并不容易