首先，將圖片的路徑存儲在img標簽的一個非src屬性中，LOL首頁是存儲在rel屬性中的，此舉是避免頁面直接加載圖片。優化輪播廣告的加載方式，然后使用JS的監聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監聽頁面的scroll事件。一旦頁面滾動，就會執行一個編寫的函數，來判斷圖片是否處于瀏覽器的當前一屏內，如果是，將rel屬性內的地址賦值給src屬性，如果不是，繼續監聽。當板塊內的所有圖片都被加載后，取消監聽。LOL官網首頁的活動板塊和媒體合作板塊均使用了這種技術，大大減少了頁面的加載量。
簡單的說，本地存儲就是為網頁通過客戶端網頁瀏覽器在本地存儲鍵值對的一個方法。就像Cookie，就算你離開了網站，關閉了瀏覽器標簽，退出瀏覽器等等，數據也會一直存在。與Cookie不同的是，數據絕不會向遙遠的網絡服務器傳送（除非你使用其他方法來手動傳輸）。不同于提供長期本地存儲的上述所有嘗試，它在網頁瀏覽器內以原生的方式執行，因此在第三方瀏覽器插件失效的情況下它也能有效執行。
我們對于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；對于IE瀏覽器，使用IE提供的userData方法；對于其他瀏覽器使用常規方法加載內容。
userData是IE提供的一個本地存儲方法，他將需要存儲的內容放置在本地的一個XML文件中，并在頁面的一個元素中設置一個調用的錨點。具體使用方法為：使用getElementById獲取頁面內的一個元素，使用addBehavior(“#default#userData”)對其添加本地存儲的行為；使用setAttribute將需要存儲的內容對其進行賦值，并用save(“XXX”)方法將內容存儲在名為XXX的XML文件中；使用load(“XXX”)方法加載本地的XXX.xml文件，并用getAttribute獲取已經存儲的內容。
其實這是很多大型網站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網里做一個嘗試，效果不錯，初期為首頁節省了幾十K的下載量，因為不同顯示器分辨率不同，所以第一屏高度不一樣，這個數據有所浮動。
【 微信掃一掃 】
