常用前端效果之頁面載入

阿新 • • 發佈：2019-01-29

咱們在做前臺頁面開發的時候經常會遇到一種場景，那就是頁面需要載入大資料量的資源。比如做一個相簿，視訊網站等等。如果這時候在進入頁面的時候不做處理，那給使用者展現的就是漫長而無聊的等待，使用者體驗性相當不好。因此在這介紹常見的頁面載入效果如何製作.
製作思路如下：1.在要顯示的頁面上層新增“畫布”，當用戶進入頁面的時候只能看到這層畫布，它用於展示載入中的動畫。 2.頁面自動檢測資源是否已經全部載入完成，當載入完成時隱藏“畫布”，展示頁面.
誤區： 往往有人在做這個效果的時候會使用定時器，即自己估算一個保守的時間，然後用定時器來記時，當記時完成隱藏”畫布”。這種方式往往也能達到效果，但缺點是就算頁面提前載入完成使用者也必須要等待這麼長時間。
正確做法：

利用document.onreadystatechange+document.readystate來完成。
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 畫布 */
        .loadding{
            position: fixed;/* 隨滾動條移動 */
            width 
: 100%;/* 寬高整個螢幕 */
            height: 100%;
            z-index: 100; /* 位於上層 */
            background: #ffffff;/* 背景色覆蓋要顯示頁面 */
            left: 0px;/*  位置固定整個螢幕 */
            top: 0px;
        }
        .loadding .pic{
            /* 圖片大小 */
            width: 250px;
            height: 130px;
            position 
: absolute;/* 相對於父節點絕對定位 */
            /* 位於螢幕中間 */
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            /* 背景為動畫 */
            background-image: url("../images/loading.gif");
        }
    </style>
    <script src="../js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            //載入上層畫布
            var loading = "<div class='loadding'><div class='pic'></div></div>";
            $("body").append(loading);
            //載入狀態改變時呼叫
            document.onreadystatechange=function(){
                //當頁面載入完成時隱藏載入動畫
                if(document.readyState=="complete"){
                    $(".loadding").fadeOut();
                }
            }
        })
    </script>
</head>
<body>
    <img src="http://img15.3lian.com/2015/f2/50/d/73.jpg" alt="">
</body>
</html>

程式碼中對應的資源可去網上查詢。需要說明兩個東西：
1.window.onload body.onload 和 document.onreadystatechange的區別
window.onload： 頁面全部載入完成，甚至包括圖片
body.onload： 等doucment載入完成再載入相應的指令碼
document.onreadystatechange： 當頁面載入狀態改變的時候執行這個方法。
2.readyState 定義和用法
用法直接使用document.readyState
返回值包含以下幾種：
uninitialized - 還未開始載入；
loading - 載入中；
interactive - 已載入，文件與使用者可以開始互動；
complete - 載入完成；
需要注意的是 html頁面只能檢測到interactive及complete這兩種狀態
以上就是簡單的做一個頁面載入效果的流程，還是應該避免使用定時器的寫法

常用前端效果之頁面載入

常用前端效果之頁面載入

前端自學之頁面效果集合

iOS 效能優化之頁面載入速率

Android酷炫動畫效果之進度載入動畫

常見小效果之懶載入

前端編程之頁面放大鏡功能的實現

web前端學習之HTML5新增頁面元素

前端開發之常用插件

HTML編程之頁面滾動div固定效果的實現

常用前端頁面一些知識總結

淺談前端實現頁面載入進度條以及 nprogress.js 的實現

前端入門之(vue圖片載入框架完結)

常用的幾個CSS前端效果

前端之頁面開發流程

簡單實用的JS實現頁面載入完畢之前loading提示效果(相容性較強的loading載入程式碼)

前端常用設計模式之工廠模式(一)

前端歷程(三)---頁面小練習之導航欄加下拉選單

【web前端優化之reflow】減少頁面的迴流

前端總結之html：視窗大小改變頁面

web前端壓縮圖片方法——加快頁面載入速度

常用前端效果之頁面載入

相關推薦