對(duì)img和div的背景圖片進(jìn)行懶加載沉噩。
在data-original寫入真正的鏈接绎速。
// 注意: 需要引入jQuery
(function() {
// 獲取window的引用:
var $window = $(window);
// 獲取包含data-src屬性的img颈将，并以jQuery對(duì)象存入數(shù)組:
var lazyImgs = $('img[data-original]')
var xxx=[]
$('img[data-original],div[data-original]').each(function(index,element){
xxx.push($(this))
})
//[].map($('img[data-src]').get(), function (i) {
//return $(i);
//});
console.log(xxx)
// 定義事件函數(shù):
var onScroll = function() {
// 獲取頁面滾動(dòng)的高度:
var wtop = $window.scrollTop();
// 判斷是否還有未加載的img:
if (xxx.length > 0) {
// 獲取可視區(qū)域高度:
var wheight = $window.height();
console.log(wheight)
// 存放待刪除的索引:
var loadedIndex = [];
// 循環(huán)處理數(shù)組的每個(gè)img元素:
$.each(xxx, function (index, i) {
console.log(i)
// 判斷是否在可視范圍加200px內(nèi):
if (i.offset().top - wtop < wheight + 200) {
if(i[0].tagName === 'IMG'){
i.attr('src', i.attr('data-original'));
}else if(i[0].tagName === 'DIV'){
i.css('background',"url(img/bmw_m1_hood.jpg)")
}
// 設(shè)置src屬性:
i.attr('src', i.attr('data-original'));
// 添加到待刪除數(shù)組:
loadedIndex.unshift(index);
}
});
// 刪除已處理的對(duì)象:
$.each(loadedIndex, function (index) {
xxx.splice(index, 1);
});
}
};
// 綁定事件:
$window.scroll(onScroll);
// 手動(dòng)觸發(fā)一次:
onScroll();
})()
(function() {
var $window = $(window);
var lazyImgs = $('img[data-original]')
var xxx=[]
$('img[data-original],div[data-original]').each(function(index,element){
xxx.push($(this))
})
console.log(xxx)
var onScroll = function() {
var wtop = $window.scrollTop();
if (xxx.length > 0) {
var wheight = $window.height();
var loadedIndex = [];
$.each(xxx, function (index, i) {
if (i.offset().top - wtop < wheight) {
if(i[0].tagName === 'IMG'){
i.attr('src', i.attr('data-original'));
}else if(i[0].tagName === 'DIV'){
console.log(i)
i.css("background-image","url("+i.attr('data-original')+')')
}
loadedIndex.unshift(index);
}
});
$.each(loadedIndex, function (i,index) {
xxx.splice(index, 1);
});
}
};
onScroll();
$(window).scroll(onScroll);
})()
