首先，將圖片的路徑存儲(chǔ)在img標(biāo)簽的一個(gè)非src屬性中，LOL首頁(yè)是存儲(chǔ)在rel屬性中的，此舉是避免頁(yè)面直接加載圖片。優(yōu)化輪播廣告的加載方式，然后使用JS的監(jiān)聽(tīng)方法（IE是attachEvent，其他瀏覽器是addEventListener），監(jiān)聽(tīng)頁(yè)面的scroll事件。一旦頁(yè)面滾動(dòng)，就會(huì)執(zhí)行一個(gè)編寫(xiě)的函數(shù)，來(lái)判斷圖片是否處于瀏覽器的當(dāng)前一屏內(nèi)，如果是，將rel屬性內(nèi)的地址賦值給src屬性，如果不是，繼續(xù)監(jiān)聽(tīng)。當(dāng)板塊內(nèi)的所有圖片都被加載后，取消監(jiān)聽(tīng)。LOL官網(wǎng)首頁(yè)的活動(dòng)板塊和媒體合作板塊均使用了這種技術(shù)，大大減少了頁(yè)面的加載量。

簡(jiǎn)單的說(shuō)，本地存儲(chǔ)就是為網(wǎng)頁(yè)通過(guò)客戶端網(wǎng)頁(yè)瀏覽器在本地存儲(chǔ)鍵值對(duì)的一個(gè)方法。就像Cookie，就算你離開(kāi)了網(wǎng)站，關(guān)閉了瀏覽器標(biāo)簽，退出瀏覽器等等，數(shù)據(jù)也會(huì)一直存在。與Cookie不同的是，數(shù)據(jù)絕不會(huì)向遙遠(yuǎn)的網(wǎng)絡(luò)服務(wù)器傳送（除非你使用其他方法來(lái)手動(dòng)傳輸）。不同于提供長(zhǎng)期本地存儲(chǔ)的上述所有嘗試，它在網(wǎng)頁(yè)瀏覽器內(nèi)以原生的方式執(zhí)行，因此在第三方瀏覽器插件失效的情況下它也能有效執(zhí)行。

我們對(duì)于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；對(duì)于IE瀏覽器，使用IE提供的userData方法；對(duì)于其他瀏覽器使用常規(guī)方法加載內(nèi)容。

其實(shí)這是很多大型網(wǎng)站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網(wǎng)里做一個(gè)嘗試，效果不錯(cuò)，初期為首頁(yè)節(jié)省了幾十K的下載量，因?yàn)椴煌@示器分辨率不同，所以第一屏高度不一樣，這個(gè)數(shù)據(jù)有所浮動(dòng)。