利用document.onreadystatechange+document.readystate來完成。
**如下:
lang="en">
charset="utf-8">
titletitle>
/* 畫布 */
.loadding
.loadding
.pic
style>
src="../js/jquery-1.11.3.js">
script>
$(function
() }
})script>
head>
src=""
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這兩種狀態
以上就是簡單的做乙個頁面載入效果的流程,還是應該避免使用定時器的寫法
前端小程式頁面常用效果
var wxparse require wxparse wxparse.js var cart comm list res.comment for var i in cart comm list var cart list page.data.cart list var cart id list v...
前端頁面載入速度優化 Ngnix之GZIP壓縮
gzip on 開啟gzip gzip static on 是否開啟gzip靜態資源 nginx對於靜態檔案的處理模組,該模組可以讀取預先壓縮的gz檔案,這樣可以減少每次請求進行gzip壓縮的cpu資源消耗。該模組啟用後,nginx首先檢查是否存在請求靜態檔案的gz結尾的檔案,如果有則直接返回該gz...
WebKit之頁面載入
website webkit在渲染一張頁面之前,首先,需要從網路上載入頁面資料,以及頁面中所使用到的 指令碼 css等資源。然後,通過布局引擎將獲取的資源資訊布局。最後,渲染引擎將資料渲染到瀏覽器的檢視中。那麼,網頁資料資源在webkit中是如何被載入的,以及載入過程中涉及了那些元件模組呢?在web...