懶載入技術是現在許多大型網站的都使用的提高網站性能的方式,它的核心思想是當用戶想看頁面某個區域時，再載入該區域的數據。這在一定程度上減輕了伺服器端的壓力，也加快了頁面的呈現速度。 其實國內很多網站都用到了懶載入技術,比如國內兩個大型電商網站的頁面都運用到了這項技術: 天貓首頁: 京東商品列表頁: 最 ...
懶載入技術是現在許多大型網站的都使用的提高網站性能的方式,它的核心思想是當用戶想看頁面某個區域時，再載入該區域的數據。這在一定程度上減輕了伺服器端的壓力，也加快了頁面的呈現速度。
其實國內很多網站都用到了懶載入技術,比如國內兩個大型電商網站的頁面都運用到了這項技術:
天貓首頁:
京東商品列表頁:
最近在學習時,自己寫了一個帶懶載入功能的電影列表展示頁,大家可以先看下頁面效果:
http://f81236211.w4w7.tumm.top/lazyload/
然後自己在頁面底部寫了一個分頁功能,頁面跳轉後仍然是懶載入的,只有後面的內容滾動進視野區內時,才去載入.
(大家在看demo時,不要頻繁跳轉請求頁面,因為給我提供數據的豆瓣開發者api進行了請求頻率限制,頻繁請求會暫時掛掉,其實我自己也把豆瓣的數據爬取到我的伺服器資料庫了了,但是還要寫伺服器端的傳輸數據介面太麻煩了,直接跨域從豆瓣拿了)
懶載入一般主要用於圖片,因為我們都知道,一個頁面載入中一般來說占流量最大的就是圖片了,一般來說懶載入的主流實現方式是:先將需要懶載入的圖片的真正src隱藏掉，這樣圖片就不會下載，然後在圖片需要呈現給用戶時再加上真實的src屬性。
我這裡寫了一個懶載入圖片的demo:
http://f81236211.w4w7.tumm.top/lazyimg/
大家可以看下,原理是:
1.一開始讓頁面中所有資源的src都是1.jpg,這樣頁面載入時只會載入一張圖片
<img src="./img/1.jpg" data-src="img/3.jpg">
<img src="./img/1.jpg" data-src="img/4.jpg">
<img src="./img/1.jpg" data-src="img/a.jpg">
<img src="./img/1.jpg" data-src="img/b.jpg">
<img src="./img/1.jpg" data-src="img/c.jpg">
2.監測滾動條滾動,滾到到視野範圍內時,讓圖片的src變為圖片上data-src裡面真實的圖片地址,這樣就實現了動態的懶載入效果.
現在很多網站圖片的懶載入都是基於這個原理實現的,但是很多網站不止懶載入圖片,還懶載入區塊內容,就像許多空間新聞類網站的列表頁一樣,比如知乎:
以及qq空間:
當頁面滾動滾動到視野區域內時,載入整塊內容,包括html結構,我開頭的電影demo里簡單實現了這個效果,可以發現當滾動條滾動到這個區域時,整個html結構都是動態生成的,這是我電影懶載入demo里實現的效果:
我們先不討論這樣做的優缺點,只說一下簡單實現原理:
1.做一個html模板.我這裡用的arttemplate做的.
2.當頁面首次呈現出來時把數據嵌入到模板里.然後把模板append到頁面容器內.
3.當頁面滾動到視野區時,去緩存中或者是用ajax去非同步請求一屏的數據再次嵌入到模板里,然後append到頁面容器內,這樣的話如果有無限的數據就會產生知乎,QQ空間哪種無限內容載入的瀑布流效果.
(此處我的電影數據有限,所以沒有做成瀑布流,做成了分頁的形式,不能無限載入,只要載入5屏就會到頁面底部選擇是否跳轉到新的一頁,比較類似電商網站商品列表的風格)
由於懶得下插件,自己全用jquery寫的,這裡幾個與本文有關的工具及插件,大家自行搜索:
懶載入:lazyload.js
分頁:twbs-pagination
模板:arttemplate
數據:豆瓣開發者api
這是github源碼地址:https://github.com/JOE-XIE/lazy-demo
關於圖片懶載入以及區塊的懶載入,大家如果有更NB的實現方式或優化方式歡迎在評論區分享一下,在此拋磚引玉,懇請大神指導!
