css 頁面加載完成之前的loading

什麼時候顯示loading

1.DOM頁面加載完成之前

$(function () {    
setTimeout(() => {
        $('#page').show();
        $('.preloader').hide();
    }, 600);
}）
           

2.DOM、圖檔和JS檔案加載完成之前

window.onload = function () {
    setTimeout(() => {
        $('#page').show();
        $('.preloader').hide();
    }, 600);
};
           

怎麼顯示

1.标題欄loading

微信和釘釘都是這種加載方式。

頁面本地有緩存的時候使用這種，使用者體驗和效果會較好。

2.白屏loading

美團的頁面就是這種。注意：loading要可以看很久，最好是有意思的。加載不成功要回報失敗資訊給使用者。

3.進度條

在頂部或者底部顯示加載進度條、頁面空白或顯示正在加載。

[這是圖檔，自行想象一下~]

4.預設圖/占位符

網絡上有很多圖檔預加載、懶加載的代碼。很舒适，使用者體驗極佳。

從根本解決加載等待問題

1.優化加載算法

對于二次開發可能比較痛苦，一次的話，就需要自己好好寫，講到底還是要講究規範吧（以上為個人了解）。

減少與伺服器的資料互動時間，能合并的小js檔案就合并，能減少請求的就減少請求。

2.異步加載

這個應該算是在網絡不好得時候，使用者操作資料的問題。想到了就要哔哔一句。

先将操作記錄下來，然後等網絡好了，在上傳伺服器這種。

3.預加載頁面

多用在浏覽圖書、或者需要下拉的網站，用qq浏覽器看書的時候，他的下一頁就是預加載的，就算網絡不太行也不影響。