圖片延遲加載處理的實(shí)現(xiàn)

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

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

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

第一種情況推薦使用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();
設(shè)置敏感性，也就是距離邊界的距離，默認(rèn)是0

$("img").lazyload({ threshold : 200 });設(shè)置點(diǎn)位圖片

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

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

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

第二種情況隱藏區(qū)域內(nèi)容的圖片，上面的插件就不起作用了這里可以考慮作如下處理
標(biāo)簽如下：

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

可以通過HTML5驗(yàn)證。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)