Question

我看过网站，当页面第一次加载像进度条这样的youtube时。进度条完成后，页面内容显示为淡入淡出效果。网站地址为do.call

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

以下是我咨询过的一些链接。

https://www.skysite.com/

请指导我如何显示像进度条一样的YouTube，当进度完成时，我想显示页面内容。

Answer 1

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

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

您可以在行动here中预览此库的示例（是的，启动能力）

评论更新：

你有2个账号吗？正如我已经所说，这个库全部。它跟踪脚本本身之后加载的每个字节。轻松可自定义，并且清晰文档应读取。它允许您观察 dom元素加载进度， images / scripts / ajax 填充进程，甚至是长脚本。

如果你只有你的主要html页面是重要的东西，你应该考虑改变你的设计和小块重构。
如果您仍然无法跟踪进度，可以在页面顶部放置一个简单的脚本：

使用ajax发送同一页面的HEAD http请求。只是想知道你的总页面大小（Content-Length标题）。
根据当前页面大小显示进度（多种跟踪方式，最简单的方式类似于document.firstElementChild.innerHTML.length（它不会非常精确））
加载页面后，删除进度条

我为你提供了使它发挥作用所需的一切。

EDIT2：

我觉得你会要求更多......这是一个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 2

一个选项：

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

另一种选择：

隐藏页面上的所有内容（可能使用javascript添加＆＃39;隐藏＆＃39;到divs - 有很多方法可以做到这一点）
...除了进度条。填写从0％到100％。
使用javascript隐藏进度条并显示所有内容。

Answer 3

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

Answer 4

您可以使用此类库：http://ricostacruz.com/nprogress/

看起来与YouTube加载页面的方式完全相同。

想要在页面加载时向youtube显示进度条

4 个答案:

评论更新：

EDIT2：