按需加載是網站性能優化立竿見影的其中一項,按需加載可以了解為 當用戶觸發某個動作的時候,才主動去請求資源,這樣帶來的優化好處:減少了HTTP請求,節省寬帶,讓頁面首屏的內容更快展現在用戶的視線范圍內,可見極大提高了用戶體檢。觸發的動作有很多,如鼠標點擊,拉動頁面滾動條,鼠標經過等等。
【一】 圖片按需加載
<img src="偽裝的圖片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff">
原理:把圖片的真實資源地址存放在標簽自定義的屬性里面,如 'data-src',那么src屬性就用一張透明的圖片占用(1K左右),當觸發動作時,交換屬性,就可以達到按需加載。常見的交互效果是圖片滾動按需加載,可參考我之前所寫的插件講解,進入。
【二】內容按需加載
(1)利用textarea標簽,將你需要按需加載的HTML結構全放到這標簽里面,這樣頁面解析的時候會忽略它們,如圖:
<div> <textarea id="lazy-a"> <p> <img src="http://dummyimage.com/990x90/259/fff"> <span>title</span> </p> </textarea> </div>
谷歌開發工具截圖:
如上圖所示,網絡里面沒有圖片的資源加載。
var target = document.getElementById('lazy-a'); target.parentNode.innerHTML = target.value;
當觸發的時候,將textarea的value賦值給父元素的innerHTML,就達到了按需加載,在太平洋汽車網的滾動效果里面的按需加載就用到此做法,鏈接:
你可以把全部的內容都放到textarea標簽里面,如 樣式,圖片,腳本,它們都不會被解析。
(2) script標簽的 type="text/html" 有着異曲同工,但常常是用來當js代碼片段模板處理,如彈窗框等等
<script type="text/html" id="j-tips"> <div class="ui-pop"> <div class="ui-pop-hd"></div> <div class="ui-pop-bd"> <p class="tips-txt">{tipstxt}</p> </div> </div> </script>
(3)調用程序生成的ajax接口,通過觸發動作往頁面添加內容,如瀑布流布局,點擊加載更多等等,如太平洋汽車網的圖庫,鏈接,通過滾動觸發,請求ajax接口,加載更多的圖片資源
總結:按需是提高網速的重要方法之一,要點就是通過觸發動作去加載資源,這些資源很多,如圖片,樣式,HTML,iframe,flash等等