如何顯示進度條，直到頁面完全加載到HTML5/CSS3中？

我想要一個Flash網站來加載我的html5/css3網頁。如何顯示進度條，直到頁面完全加載到HTML5/CSS3中？

頁面只有在完全呈現時纔會顯示。在顯示之前，必須出現一個加載欄。

我該怎麼做？除了HTML5和CSS3之外，我還需要其他的東西嗎？

請給我提供教程。

來源

2014-01-22 Nikhil Tamhankar

沒有，Stack Overflow是不是代碼/指南要求的網站。使用Google –

Com'on！ Google會將您發送到Codeplex或StackOverflow！如果你有答案，爲什麼不幫忙？你想爲自己保留所有的知識嗎？分享它！它可以讓你快樂！ – CodeHacker

把一個div您的網頁的開頭（嗯，這是一個微調，而不是裝載吧...但是...）

<div id="work-in-progress"> 
     <div class="work-spinner"></div> 
    </div>

然後使用JQuery綁定到Load事件...它被當頁面加載

$(window).bind("load", function() { 
     $('#work-in-progress').fadeOut(100); 
    });

，並添加一些CSS的div來

#work-in-progress { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    font-size: 150px; 
    text-align: center; 
    vertical-align: middle; 
    color: #000000; 
    z-index: 200000; 
    background-color: #FFFFFF; 
} 

.work-spinner { 
    background-color: rgba(0,0,0,0); 
    border: 9px solid rgba(27,61,226,0.9); 
    opacity: .9; 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 120px; 
    -webkit-box-shadow: 0 0 35px #1B3DE2; 
    box-shadow: 0 0 35px #1B3DE2; 
    width: 100px; 
    height: 100px; 
    margin: 0 auto; 
    -moz-animation: spin .5s infinite linear; 
    -webkit-animation: spin .5s infinite linear; 
    -o-animation: spin .5s infinite linear; 
    animation: spin .5s infinite linear; 
}

來源

2014-01-23 01:37:41 CodeHacker

太棒了。所以，基本上微調將繼續旋轉，除非頁面加載完成。但它不會顯示百分比，對吧？ –

是的，因爲我不知道頁面的「百分比」是否已經加載。我不想擁有「MS」-Style：「99％完成2 30秒......嘻嘻 – CodeHacker

@pimboden我在使用HTML，PHP，JAVASCRIPT開發的FB帆布遊戲之一中實現了預裝載器。遊戲代碼是一個單一的索引文件，它在單個單獨的「div」中有多個「div」和多個提交按鈕。每個提交按鈕從數據庫提取數據並在各個「div」上加載數據。當用戶單擊任何提交按鈕它執行預加載器但是我想只顯示預加載器一次，即當遊戲開始時不是每次用戶單擊提交按鈕時。我知道每次用戶點擊提交按鈕時提交按鈕重新加載（刷新）索引文件。 – sanjay

如果您使用的圖像的數量巨大，只是希望用戶等待，直到他們得到加載顯示慢慢露出圖像而不是您可以使用

https://github.com/alexanderdickson/waitForImages

其幾乎所有你可能要因爲休息的頁面只是文本[如果它的正常大小的網頁]。它會立即加載。

來源

2014-01-22 09:09:04

這是一個大問題，但我可以把你的方向：

$(window).load(function(){ 
//initialize after images are loaded 
});

有時你想操作/顯示圖片或網頁。例如，您想縱向和橫向對齊圖片，並且需要獲取圖片的寬度和高度才能實現此目的。使用$（document）.ready（）時，如果訪問者沒有加載圖像，那麼您將無法做到這一點，在這種情況下，您需要在圖像加載完成時初始化jquery alignment函數。

來源

2014-01-22 09:13:08

這裏可能是朝着正確方向邁出的一步：

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

這隻能說明一切時加載的網站！

來源

2014-01-22 14:06:45

pimboden's answer解僱很棒，但它需要實際的keyframes動畫。

這裏的缺失CSS：

@-moz-keyframes spin { 
    from { 
     -moz-transform: rotate(0deg); 
    } 
    to { 
     -moz-transform: rotate(360deg); 
    } 
} 

@-webkit-keyframes spin { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes spin { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 
@-o-keyframes spin { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
}

來源

2016-01-11 17:36:36 camdenl

哦......經過這麼多年......但是真的！ – CodeHacker

如何顯示進度條，直到頁面完全加載到HTML5/CSS3中？

回答

相關問題