HTML5延遲加載原理

這是很多大型網站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網里做一個嘗試，效果不錯，初期為首頁節省了幾十K的下載量，因為不同顯示器分辨率不同，所以第一屏高度不一樣，這個數據有所浮動。 首先，將圖片的路徑存儲在img標簽的一個非src屬性中，LOL首頁是存儲在rel屬性中的，此舉是避免頁面直接加載圖片。然后使用JS的監聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監聽頁面的scroll事件。一旦頁面滾動，就會執行一個編寫的函數，來判斷圖片是否處於瀏覽器的當前一屏內，如果是，將rel屬性內的地址賦值給src屬性，如果不是，繼續監聽。當板塊內的所有圖片都被加載后，取消監聽。LOL官網首頁的活動板塊和媒體合作板塊均使用了這種技術，大大減少了頁面的加載量。