解決網頁刷新時佈局紊亂(jquery ready和load事件)

PC項目開發時遇到頁面刷新時會出現2S左右的紊亂,會影響到用戶體驗;

那麼要想直接給用戶呈現一個完整的頁面,而不在頁面加載時就呈現給用戶,一般要採用預加載,可以在整個頁面都加載完畢時,然後再呈現給用戶。

(頁面加載時,最慢的還是一些腳本、圖片,其中圖片是主要問題);

解決短暫的頁面佈局紊亂,可以使用jquery的load事件,如下:

$("#fullback").hide();
我的是一個大的div;一般直接寫body就好;

也就是先把html的元素隱藏掉,接下來代碼如下:

$(window).load(function () {
    $("#fullback").show();
});

在load事件的回調函數內讓元素顯示,這樣就解決了!


面試中好多時候會問ready和load誰先執行?答案是ready先執行,load後執行;

要想知道爲什麼是ready先執行,就得明白DOM文檔加載的步驟:

1:解析HTML結構;

2:加載外部腳本和樣式表文件;

3:解析並執行腳本代碼;

4:構造HTML,DOM模型;===》ready

5:加載圖片等外部文件;

6:頁面加載完畢;===》load


如上所示    ready事件針對的是document對象,在DOM結構繪製完成之後就會執行。這樣能確保就算有大量的媒體文件沒加載出來,JS代碼一樣可以執行。

而load事件可以針對window對象或者img這些部件加載元素,必須等到網頁中所有內容全部加載完畢之後才被執行。


發佈了40 篇原創文章 · 獲贊 35 · 訪問量 23萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章