圖片延遲加載處理的實現

頁面中圖片過多能夠讓圖片延遲加載會大大提高頁面的加載速度，提高用戶可用性。

1、有的頁面是頁面過長或過寬，可以考慮只加載顯示區域附近的圖片。

2、圖片所在窗口不顯示，比如Tab內容切換，內容輪播等也要考慮把沒有顯示的圖片延遲加載

第一種情況推薦使用jQuery.LazyLoad插件。

jQuery.LazyLoad.js插件使用方法非常簡單

頁面頭引入js文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

使用對所有圖片都使用延遲加載

$("img").lazyload();或者使用選擇符給部分圖片延遲加載如下

$("img.lazy").lazyload();
$("#contrainer img").lazyload();
$(".slideshow img").lazyload();
設置敏感性，也就是距離邊界的距離，默認是0

$("img").lazyload({ threshold : 200 });設置點位圖片

$("img").lazyload({ placeholder : "img/grey.gif" });設置圖片加載事件：這里可以設置一切jQuery的事件，也可以自定義事件名稱

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
設置圖片加載效果

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
更新詳細的使用方法請移步官方http://www.appelsiini.net/projects/lazyload

第二種情況隱藏區域內容的圖片，上面的插件就不起作用了這里可以考慮作如下處理
標簽如下：

container.find('img[data-src]').each(function() {
$(this).attr('src', $(this).attr('data-src'))
.removeAttr('data-src');
});

可以通過HTML5驗證。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈