想要在页面加载时像进度条一样显示 youtube

Question

我见过一些网站，当页面第一次加载时会显示类似 youtube 的进度条。当进度条完成时，页面内容显示为淡入效果。网址为https://www.skysite.com/

我检查了很多类似youtube的进度条链接，但是那些页面都显示了像你一样的进度条，但它们与页面内容无关。

以下是我参考过的一些链接。


http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/index5.html
http://jsfiddle.net/ajaSB/3/
http://thuru.net/2014/10/05/youtube-like-progress-bar-using-nprogress-js-with-angular-js/
http://ricostacruz.com/nprogress/

请指导我如何显示类似 youtube 的进度条，当进度完成时我想显示页面内容。

Answer 1

一个选项：

重定向到带有空进度条的空白页面。
使用javascript填充进度条从0%到100%。
然后使用 javascript 重定向到您的内容页面。

另一个选项：

隐藏页面上的所有内容（可以使用 javascript 将 'hidden' 添加到 div - 有很多方法可以做到这一点）
...进度条除外。从 0% 填充到 100%。
使用javascript隐藏进度条并显示所有内容。

Answer 2

您所指的网站正在使用 pace - https://github.com/HubSpot/pace/

它监听所有ajax请求和dom加载并在隐藏页面时显示进度条。加载所有内容后，它会显示内容。

您可以预览这个库的一个例子here（是的，启蒙力量）

评论更新：

您有 2 个帐户吗？
正如我已经所说，这个库 包办一切。它跟踪在脚本本身之后加载的 EVERY 字节。它很容易可定制，并且有一个清晰文档，您应该阅读。它允许您查看 dom 元素 加载进度，images/scripts/ajax 填充进度，甚至您的 长脚本.

如果您只有主 html 页面，那是很重的内容，您应该考虑更改设计并分段重构。
如果您不能并且仍然想跟踪进度，您可以在页面的最顶部放置一个简单的脚本：

为与 ajax 相同的页面发送 HEAD http 请求。只是为了知道您的总页面大小 (Content-Length header).
根据当前页面大小显示进度（跟踪的方式很多，最简单的是document.firstElementChild.innerHTML.length（不会很精确））
页面加载完成后，移除进度条

我给了你让它发挥作用所需的一切。

编辑2：

我觉得您会要求更多...这是一个 NodeJs 示例。它只是创建一个 http 服务器，并提供一个包含分块内容的页面（并模拟滞后......）。所以整个页面需要时间来加载。 javascript 实时显示文本进度。

var http = require('http');

function chunked(res, count) {
    res.write('<p>Chunked content n°' + count + '</p>');
    setTimeout(function() {
        if(count > 0)
            chunked(res, count - 1);
        else
            res.end('</body></html>');
    }, 1000);
}

function handleRequest(request, response){
    response.setHeader('Connection', 'Transfer-Encoding');
    response.setHeader('Content-Type', 'text/html; charset=utf-8');
    response.setHeader('Transfer-Encoding', 'chunked');


    response.write('<html><head><script>\n' +
        'var progress = 0; startLength = 825; TotalLength = 1090;\n' +
        'function track_progress() {\n' +
        '    console.log(document.firstElementChild.innerHTML.length);' +
        '    if(progress > 1000) {' +
        '        document.body.firstElementChild.innerHTML = "Progress: 100% - Done !";\n' +
        '        return;\n' +
        '    }\n' +
        '    \n' +
        '    if(document.body) {\n' +
        '        progress = (document.firstElementChild.innerHTML.length - startLength)* 1000 / (TotalLength - startLength);\n'+
        '        document.body.firstElementChild.innerHTML = "Progress: " + (Math.round(progress)/10) + "%";\n' +
        '    }\n' +
        '    setTimeout(track_progress, 500);\n' +
        '}\n' +
        'track_progress();\n' +
    '</script></head><body><p id="progress">Progress: 0%</p>');

    response.write('<p>Starting to send chunked content...</p>');
    chunked(response, 10);
}

var server = http.createServer(handleRequest);
server.listen(8080, function(){
    console.log("Server listening on: http://localhost:8080");
});

Answer 3

加载页面时，显示进度条。加载内容后隐藏进度条。您可以使用像 JQwidgets 这样的库来创建进度条。

想要在页面加载时像进度条一样显示 youtube

Want to show youtube like progress bar when page load

javascript

youtube

jquery

progress-bar

评论更新：

编辑2：