TGideas實例：加載，不只是少一點點(4)

圖3-1 執(zhí)行流程

對于圖片，滾動頁面后，我們可以看到如圖3-2的效果。

圖3-2 圖片滾動加載過程

2.1.2 板塊滾動加載

其實把每個板塊按照上面說的那種方式，像圖片一樣，滾動加載就可以實現(xiàn)這種效果，類似于bigPipe+Lazyload。

我們將頁面拆分為框架、板塊、板塊內(nèi)容，甚至可以細(xì)分到板塊樣式、板塊腳本。當(dāng)頁面滾動完成時，判斷處于當(dāng)前屏的板塊，動態(tài)并行加載板塊內(nèi)容。這種方式可以大大減少頁面的加載量，但會影響SEO。

圖3-3 板塊滾動加載方式

2.2 點擊加載

2.2.1 形式

點擊后動態(tài)加載有很多形式，這是我們平時使用最多的方式。諸如頁卡、翻頁、展開、下拉、切屏等等都會使用到。以往的我們可能直接在頁面寫入內(nèi)容，或者使用include載入，并將看不到的內(nèi)容隱藏掉。但如果用戶并沒有點擊切換，那么直接加載這些內(nèi)容就產(chǎn)生多余的加載量。

圖3-4 觸發(fā)加載頁卡內(nèi)容

圖3-5 翻頁觸發(fā)動態(tài)加載

2.2.2 觸發(fā)加載

一般來說，動態(tài)填充數(shù)據(jù)的前期判斷有兩種形式。

一種是使用條件語句，判斷內(nèi)容區(qū)域是否有內(nèi)容，如果沒有，填充內(nèi)容。這種方式最容易想到，但每次觸發(fā)的時候都會判斷一次。

另外一種是監(jiān)聽的方式。我們監(jiān)聽觸發(fā)的對象是否被點擊，如果點擊，就像目標(biāo)對象填充內(nèi)容，然后取消這個監(jiān)聽。

圖3-6 判斷的兩種方式

很顯然，第二種方式只需執(zhí)行一次，測試結(jié)果也表明這種方式是最快的。

2.2.3 數(shù)據(jù)插入方式

我們的新聞系統(tǒng)在生成新聞列表的時候，會根據(jù)我們的模板同時生成html頁面、xml文件（我們很少使用）、json文件，在選擇將列表插入頁面的時候，我們有兩種方式。

一種是動態(tài)加載json文件，用JS生成內(nèi)容，插入頁面；另一種是使用XHR加載html文件，使用responseText獲取內(nèi)容，插入頁面。

圖3-7 html文件

圖3-8