想显示youtube喜欢进度条时，页面加载

Want to show youtube like progress bar when page load

本文关键字：加载 显示 youtube 喜欢      更新时间：2023-09-26

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

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

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

http://stackoverflow.com/questions/18350370/youtube-like-progress-bar
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进度条，当进度完成时，我想显示页面内容。

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

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

你可以在这里预览这个库的实际示例(是的，inception power)

从评论更新:

你有两个账户吗?
正如我已经说过的，这个库完成了所有。它跟踪在脚本本身之后加载的每个字节。它很容易定制，并且有一个clear文档，您应该阅读。它允许您监视dom元素加载进度，images/scripts/ajax stuff进度，甚至是您的长脚本。

如果你只有你的主html页面是沉重的东西，你应该考虑改变你的设计和重构小块。
如果你不能但仍然想要跟踪进度，你可以在页面的顶部放一个简单的脚本，它将:

  • 用ajax发送一个HEAD http请求。只是为了知道你的总页面大小(内容长度头)。
  • 显示基于当前页面大小的进度(许多跟踪方式，最简单的是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");
});

一个选项:

  1. 重定向到空白页面，并有一个空白的进度条

  2. 使用javascript将进度条从0%填充到100%

  3. 然后使用javascript重定向到您的内容页

另一种选择:

  1. 隐藏页面上的所有内容(可能使用javascript添加'hidden'到div -有很多方法可以做到这一点)

  2. …除了进度条。

  3. 使用javascript隐藏进度条并显示所有内容

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

相关文章：