移動(dòng)端圖片延遲加載
由于國內(nèi)的電信網(wǎng)絡(luò)性價(jià)比的限制,和手機(jī)處理能力的差異,在設(shè)計(jì)一個(gè)無線應(yīng)用的時(shí)候,
為用戶節(jié)省流量是一個(gè)非常重要的考慮因素。可以說每一個(gè)字節(jié)都應(yīng)該為客戶端節(jié)省。
節(jié)約流量可以從以下幾個(gè)方面關(guān)注:
一、使用緩存 比如 利用瀏覽器本地存儲(chǔ) 前面已經(jīng)討論過
二、延遲加載代碼 (觸底檢測,通過接口獲取數(shù)據(jù))
三、資源的延遲加載,圖片出現(xiàn)在可視區(qū)域再加載,(不考慮自動(dòng)播放的情況下)音頻視頻按用戶點(diǎn)擊加載。
今天簡單說一下圖片延遲加載的實(shí)現(xiàn)方式。
例子基于jQuery 和 jQuery mobile
原理:用戶滑動(dòng)屏幕,屏幕滾動(dòng)結(jié)束(用jQuery 提供的 window scrollstop 事件合適 ) 檢測出現(xiàn)在viewport中的圖片。
替換圖片的 真正 src 屬性即可。
技巧:滾動(dòng)結(jié)束之后不要立即檢測加載,設(shè)置一秒延時(shí),也許用戶會(huì)立即開始下一次滾屏,基于現(xiàn)在的網(wǎng)絡(luò)環(huán)境,1秒的延時(shí)可以說明用戶真正想查看這些內(nèi)容。用微信的朋友可以仔細(xì)體驗(yàn)一下這一點(diǎn)。
由于有時(shí)鐘的控制,當(dāng)用戶頻繁快速翻動(dòng)屏幕,不會(huì)發(fā)大量請(qǐng)求。
主要代碼:
var refreshTimer = null,
mebook = mebook || {};
/*
*滾動(dòng)結(jié)束 屏幕靜止一秒后檢測哪些圖片出現(xiàn)在viewport中
*和PC端不同 由于無線速度限制 和手機(jī)運(yùn)算能力的差異 1秒鐘的延遲對(duì)手機(jī)端的用戶來說可以忍受
*/
$(window).on('scrollstop', function () {
if (refreshTimer) {
clearTimeout(refreshTimer);
refreshTimer = null;
}
refreshTimer = setTimeout(refreshAll, 1e3);
});
$.belowthefold = function (element) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top;
};
$.abovethetop = function (element) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height();
};
/*
*判斷元素是否出現(xiàn)在viewport中 依賴于上兩個(gè)擴(kuò)展方法
*/
$.inViewport = function (element) {
return !$.belowthefold(element) && !$.abovethetop(element)
};
mebook.getInViewportList = function () {
var list = $('#bookList li'),
ret = [];
list.each(function (i) {
var li = list.eq(i);
if ($.inViewport(li)) {
mebook.loadImg(li);
}
});
};
mebook.loadImg = function (li) {
if (li.find('img[_src]').length) {
var img = li.find('img[_src]'),
src = img.attr('_src');
img.attr('src', src).load(function () {
img.removeAttr('_src');
});
}
};
手機(jī)掃描二維碼:
posted on 2013-06-05 15:14 trance 閱讀(6491) 評(píng)論(1) 收藏 舉報(bào)
浙公網(wǎng)安備 33010602011771號(hào)