頁面加載時需要顯示進度條

我是JavaScript新手。頁面加載時需要顯示進度條

我有一個顯示報告圖的html。

報告在html中生成需要5-10秒。

我想在報告生成之前顯示進度欄。

來源

2011-05-05 vignesh

你想要一個實際的「progess」欄....或只是一個「工作」圖標顯示？ – 2011-05-05 11:18:41

只是爲了顯示工作進度 – vignesh 2011-05-05 11:27:50

您將無法單獨使用JavaScript來實現這一點。您將不得不使用Ajax進行回調並輪詢狀態...以及在5-10秒內加載的內容，這是不值得的。在我看來，你應該只是顯示一個「加載」消息。 – 2011-05-05 13:50:15

默認情況下有一個GIF動畫顯示，當你的圖形完成加載後隱藏它。你的加載函數有一個函數回調選項嗎？如果有，請在此處執行此操作。否則，請使用z-index低的加載圖標與圖形重疊，爲圖形指定更高的z-index。 vwalah。

如果你跟蹤加載％，你可以有像這樣的設置：

<div id='progress-bar-total'> 
    <div id='progress-bar-percent'></div> 
</div>

有連續呼叫，做這樣的一個功能：

function updateProgress(bytesRead, bytesTotal){ 
    var current = (bytesRead/bytesTotal) + "%"; 
    $("#progress-bar-percent").css("width", current); 
}

來源

2011-05-05 11:18:15 Atticus

我認爲PO想知道如何展示進度，而不僅僅是顯示它正在加載。 – 2011-05-05 11:19:07

哦 - 你想跟蹤進度美觀OP嗎？ – Atticus 2011-05-05 11:19:57

可以添加div與背景圖像作爲加載程序映像。

在加載中顯示此div並隱藏圖形。加載圖形後隱藏加載器div並顯示圖形

來源

2011-05-05 11:22:10

如果您是JavaScript新手，我不會嘗試使用進度條。我吸收了你一個簡單的工作圖標。使用從http://www.ajaxload.info/創建的動畫gif，並在隱藏div中構建表格時顯示該動畫。當你完成建立表格時，顯示隱藏的div並隱藏加載圖標。

來源

2011-05-05 11:22:32 herostwist

我不知道，如果你只需使用JavaScript實現這一點，但你可以檢查this script如果所有的圖像加載哪些檢查，顯示進度條。另外，正如其他人所說，你可以使用一個加載gif（make one here）隱藏你的頁面加載後。

我只在使用Flash時看到很棒的進度條，但我相信這不是您的情況使用這種技術。

來源

2011-05-05 11:32:16 astro11

頁面加載時需要顯示進度條

回答

相關問題