TGideas實(shí)例：加載，不只是少一點(diǎn)點(diǎn)(4)

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

對(duì)于圖片，滾動(dòng)頁(yè)面后，我們可以看到如圖3-2的效果。

圖3-2 圖片滾動(dòng)加載過程

2.1.2 板塊滾動(dòng)加載

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

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

圖3-3 板塊滾動(dòng)加載方式

2.2 點(diǎn)擊加載

2.2.1 形式

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

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

圖3-5 翻頁(yè)觸發(fā)動(dòng)態(tài)加載

2.2.2 觸發(fā)加載

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

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

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

圖3-6 判斷的兩種方式

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

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

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

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

圖3-7 html文件

圖3-8