javascript - 如何获取进度条加载正文内容并隐藏在 100%？

Question

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

Answer 1

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

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

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

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

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

但是，如果您想要一些超轻的东西，这里有一个关于如何自己制作进度条的概述:

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

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

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