圖片懶加載
在實(shí)際的項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常遇到這樣的情況:一個(gè)頁(yè)面要展示的圖片很多，但是在首屏出現(xiàn)的圖片只有幾張。如果我們一次性把所有的圖片都加載出來(lái)，會(huì)影響頁(yè)面的渲染速度，還浪費(fèi)帶寬。我們需要做的就是把首屏的圖片先展示，不可視區(qū)域的圖片不展示，等圖片到達(dá)可視區(qū)域的時(shí)候再加載，這就是我們圖片懶加載。
思路:
將頁(yè)面里所有img屬性src屬性用data-xx代替，當(dāng)頁(yè)面滾動(dòng)直至此圖片出現(xiàn)在可視區(qū)域時(shí)，用js取到該圖片的data-xx的值賦給src,同時(shí)移除data-xxx屬性。
懶加載判斷條件如下圖所示
js懶加載圖片.png
html結(jié)構(gòu)
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
這里用多行1來(lái)實(shí)現(xiàn)部分圖片在不可視區(qū)域,以上src的屬性用占位圖來(lái)替代，實(shí)際的圖片地址綁定在data-src屬性上。這樣首屏的時(shí)候?qū)嶋H就加載了一張圖片。
第一種(javascript)
(function(){
var imgList,
time = 250,
delay,imgH,
offset = 100;
function _delay(obj){
clearTimeout(delay);
delay = setTimeout(function(){
_imgload(obj);
},time);
}
function _imgload(obj){
imgH = obj[0].offsetHeight;
// console.log(imgH);
for(var i = 0,len = obj.length ; i < len ; i ++){
if(obj[i].getAttribute('data-src')){
if(_isShow(obj[i])){
obj[i].src = obj[i].getAttribute('data-src');
obj[i].removeAttribute('data-src');
}
}
}
}
function _isShow(el){
var coords = el.getBoundingClientRect();
//console.log(coords);
var left = coords.left ,
top = coords.top,
winH = document.documentElement.clientHeight || window.innerHeight;
// return left >=0 && ( top >= 0 || top > - imgH ) && ( top <= winH + parseInt(offset) ); //只加載可視區(qū)域的圖片
return left >=0 && top <= winH + parseInt(offset) //可視區(qū)域以上的圖片也加載
}
function imgLoad(selector){
var selector = selector || '.imgLazyLoad',
node = document.querySelectorAll(selector),
imgList = Array.apply(null,node);
_delay(imgList);
window.addEventListener('scroll',function(){
_delay(imgList);
},false);
}
imgLoad('.imgLazyLoad');
})();
第二種(jquery)
!(function($){
/*
options是個(gè)對(duì)象 非必填
*/
$.fn.imgLazyLoad = function(options){
var _windowH = $(window).height(),
_delay, //函數(shù)節(jié)流
_scrollTop = $(window).scrollTop();
//默認(rèn)參數(shù)
var defaults = {
time:500, //圖片延遲加載的時(shí)間
offset:250, //圖片預(yù)加載的距離,
className:"data-src"
} ;
var that = this;
var options = $.extend({},defaults,options);
function picLazyLoad(){
clearTimeout(_delay);
_delay = setTimeout(function(){
that.each(function(index,value){
//console.log($(value).offset().top);
if($(value).attr(options.className)){
_scrollTop = $(window).scrollTop();
if($(value).offset().top <= _windowH + _scrollTop + options.offset){
$(value).attr("src",$(value).attr(options.className));
$(value).removeAttr(options.className);
}
}
});
},options.time);
}
$(window).on('scroll',function(){
picLazyLoad();
});
picLazyLoad();
};
})(jQuery);
使用方法:
(function(){
$('.imgLazyLoad').imgLazyLoad({
time:50, //間隔時(shí)間
offset:100,//圖片距離可視區(qū)域的偏移距離
class:"data-src"
});
})();
