摘要： 提到前端性能優化中圖片資源的優化,懶加載和預加載就不能不說,下面我用最簡潔明了的語言說明懶加載和預加載的核心要點以及實現 懶加載 什么是懶加載 懶加載也就是延遲加載;當訪問一個頁面時,先將img標簽中的src鏈接設為同一張圖片(這樣就只需請求一次,俗稱占位圖),將其真正的圖片地址存儲在img標簽的.
提到前端性能優化中圖片資源的優化,懶加載和預加載就不能不說,下面我用最簡潔明了的語言說明懶加載和預加載的核心要點以及實現
懶加載
什么是懶加載
懶加載也就是延遲加載;當訪問一個頁面時,先將img標簽中的src鏈接設為同一張圖片(這樣就只需請求一次,俗稱占位圖),將其真正的圖片地址存儲在img標簽的自定義屬性中(比如data-src);當js監聽到該圖片元素進入可視窗口時,即將自定義屬性中的地址存儲到src屬性中,達到懶加載的效果;這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢頁面卡頓或崩潰等問題
為什么要使用懶加載
懶加載對於圖片較多頁面很長的業務場景很適用,可以減少無效資源的加載
懶加載的實現步驟
1.首先,不要將圖片地址放到src屬性中,而是放到其它屬性(data-src)中
2.頁面加載完成后,根據scrollTop判斷圖片是否在用戶的視野內,如果在,則將data-original屬性中的值取出存放到src屬性中
3.在滾動事件中重復判斷圖片是否進入視野;如果進入,則將data-original屬性中的值取出存放到src屬性中
代碼實現:
既然懶加載的原理是基於判斷元素是否出現在窗口可視范圍內,首先我們寫一個函數判斷元素是否出現在可視范圍內:
<script>
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scrollTop(),
offSetTop = $(window).offSet().top;
if (offSetTop < winH + scrollTop) {
return true;
} else {
return false;
}
}
</script>
再添加上瀏覽器的事件監聽函數,讓瀏覽器每次滾動就檢查元素是否出現在窗口可視范圍內:
<script> $(window).on("scroll", function{ if (isVisible($node)){ console.log(true); } }) </script>
現在我們要做的是,讓元素只在第一次被檢查到時打印true,之后就不再打印了
<script> var hasShowed = false; $(window).on("sroll",function{ if (hasShowed) { return; } else { if (isVisible($node)) { hasShowed = !hasShowed; console.log(true); } } }) </script>
這樣我們就實現了懶加載
利用懶加載和AJAX,我們還可以實現無限滾動查看時間線/在滾動頁面一段距離后出現回到頂部按鈕的效果
懶加載的優點
顯著的提高頁面加載速度,又不下載多余的資源節省了流量;同時更少的圖片並發請求數也可以減輕服務器的壓力
懶加載插件
關於圖片延時加載,網上有很多應用的例子以及插件;目前研究過的兩個插件分別是jquery插件lazyload.js和原生js插件echo.js;二者的區別不用說,jquery插件使用的時候必須引入jquery才可以,且該插件功能強大,靈活性也高;而echo.js是用原生寫的插件,代碼少,不依賴其他庫,拿起來就可以用,但能夠實現的效果不如lazyload豐富強大,但基本的延時加載要求都能滿足
jquery.lazyload.js
如何使用
延遲加載依賴於於jQuery,第一步引入文件:
<script src ="jQuery.js"></script> <script src="jQuery.lazyload.js"></script>
接下來修改html的一些屬性:圖像的src地址暫時存儲在自定義屬性data-original中,然后給需要延時加載圖像加上一個特定的類,類的名字由你自己決定,使用的時候統一類名即可;為這些圖片綁定延時加載：
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
用的時候就像下面:
$("img.lazy").lazyload();
所有class為lazy的圖片將被延遲加載
注意:必須設置圖像的尺寸,寬度和高度屬性或CSS,否則插件可能無法正常工作
參數設置
1.設置閾值
默認情況下圖片在位於可視區域后才開始加載;如果想提前加載圖片,可通過設置threshold的值來改變其顯示的時間,設置threshold為200使圖片在距離屏幕可見區域下方200像素時就開始加載
$("img.lazy").lazyload({
threshold:200
});
2.事件觸發加載
默認是scoll事件觸發延時加載,即等到用戶向下滾動至圖片出現在屏幕可視區域時圖片才能加載,但可以使用jQueryclick或mouseover等事件觸發圖片的加載,也可以使用自定義事件,實現只有當用戶點擊圖片圖片才能夠加載時可以這樣寫:
$("img.lazy").lazyload({
event : "click"
});
注意:你也可以使用這個技巧延遲圖片加載,即加載前延遲5秒后再加載圖片;就像下面這樣(trigger()方法觸發被選元素的指定事件類型):
$(function() { $("img.lazy").lazyload({ event:"click" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("click") //trigger()方法觸發被選元素的指定事件類型 }, 5000); });
3.使用特殊效果加載圖片
插件默認使用show()方法顯示圖片;當然你可以使用任何你想用的特效來處理,例如使用fadeIn效果:
$("img.lazy").lazyload({
effect : "fadeIn" //.effect()方法對一個元素應用了一個命名的動畫 特效
});
4.為非JavaScript瀏覽器回退
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
可以通過CSS隱藏占位符
.lazy {
display: none;
}
在支持JavaScript的瀏覽器中必須在DOM ready時將占位符顯示出來,這可以在插件初始化的同時完成
$("img.lazy").show().lazyload();
這些都是可選的,但如果你希望插件平穩降級這些都是應該做的
5.圖片內容器
可以將插件用在可滾動容器的圖片上,例如帶滾動條的DIV元素;將容器定義為jQuery對象並作為參數傳到初始化方法里面
#container { height: 600px; overflow: scroll; } $("img.lazy").lazyload({ container: $("#container") });
6.當圖像並不是連續的
滾動頁面時,Lazy Load會循環加載圖片;在循環中檢測圖片是否在可視區域內,默認情況下在找到第一張不在可見區域的圖片時停止循環;圖片被認為是流式分布的,圖片在頁面中的次序和HTML代碼中次序相同;但是在一些布局中,這樣的假設是不成立的;不過你可以通過failurelimit選項來控制加載行為
$("img.lazy").lazyload({
failure_limit : 10
});
將failurelimit設為10令插件找到10個不在可見區域的圖片是才停止搜索
7.處理看不見圖像
可能在你的頁面上有很多隱藏的圖片;為了提升性能,Lazy Load默認忽略了隱藏圖片;如果想要加載隱藏圖片,將skip_invisible設為 false:
$("img.lazy").lazyload({
skip_invisible : false
});
echo.js
兼容性:Echo.js使用了HTML5的date屬性,並且需要獲取該屬性的值,所以它並不兼容IE6/IE7
使用方法:
引入文件
<script src="js/echo.min.js"></script>
blank.gif用做默認圖片,data-echo的屬性值是圖片的真實地址,同樣最好給圖片設置寬度和高度
JavaScript
echo.init({ offset: 0, throttle: 0 });
參數說明
echo.js只有兩個參數:offset和throttle
offset:設置圖片在離可視區域下方在一定距離后開始被加載
throttle:設置圖片延遲多少毫秒后加載
那么上面的代碼的意思就是一旦圖片進入可視區域就立即加載
怎么樣，使用起來真的很簡單吧