如何根據頁面加載增加框的寬度

我很難創建一個應該根據頁面加載增加其寬度的進度條。如何根據頁面加載增加框的寬度

的jQuery

$(document).ready(function(){ 

    var startTime = window.performance.timing.domContentLoadedEventEnd; 
    var endTime = window.performance.timing.navigationStart; 
    var loadTime = startTime - endTime;  

})

HTML

<div class="outerWidth"> 
    <div class="innerWidth"> 
    </div> 
</div>

CSS

.outerWidth { 
    display: block; 
    border: 1px solid #999; 
    height: 10px; 
    margin-top: 20px; 
} 

.innerWidth { 
    background-color: #f00; 
    display: block; 
    height: 10px; 
    width: 0; 
}

按照該代碼的寬度Ò f innerWidth類是0

現在我想做兩件事情。

1. 因爲我有網頁的加載時間我這樣怎麼能提高innerWidth類寬度時，頁面加載100％。
如何顯示在百分比時間，以便它應在頁面裝載結束時顯示100％完成。

同樣的進度條樣的程序我在找。也顯示百分比。但通過計算頁面大小或頁面加載時間來加載任何頁面。我不知道什麼方式是正確的。

需要幫助！

來源

2017-07-06 Sam

你試過用Bootstrap進度條嗎？ http://getbootstrap.com/components/#progress – pedro

你怎麼知道你的頁面要加載多少時間？沒有這些信息，你不能顯示％。 – Dacklf

Dacklf看到loadTime變量會顯示頁面的加載時間。 – Sam

您無法知道頁面加載的時間。因此，您無法顯示百分比。

一些想法：

負荷小，重量輕，不完整版本的頁面。使用AJAX加載完整版本並在此期間顯示loading gif。
僅顯示loading gif並通過AJAX加載完整頁面。
如果您擔心使用給定腳本（客戶端）的時間，請在該持續時間內顯示loading gif。不要擔心初始加載時間。

關於問題的一部分，您可以使用bootstrap輕鬆管理進度條，或者自己創建一個進度條。這是一個example。

function startProgress() { 
    var curProg = 0;   
    var interval = setInterval(function() { 
     curProg = curProg + 5; 
     $('#progBar').css('width', curProg + '%'); 
     if (curProg > 100) clearInterval(interval); 
    }, 50) 
}

來源

2017-07-06 13:17:53 Dacklf

如何根據頁面加載增加框的寬度

回答

相關問題