实现原理:
1、对于img标签,只要将图片地址赋给src属性,浏览器解析的时候就会自动去请求图片地址所指向的资源,浏览器的这个机制我们是没办法改变的,那么我们只能在src属性上做文章,在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src,src属性留空。
2、设置一个定时器定时检测出现在视图内的图片,并将其data-src属性的值赋值给src属性。(其实这个地方也可以通过事件来检测)
原生js的实现:
var
imgs = document.getElementsByTagName(
"img"
);
function
lazyload(){
var
scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var
viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
for
(
var
i=0,len=imgs.length;i<len;i++){
var
x = scrollTop + viewportSize - imgs[i].offsetTop;
if
(x>0){
imgs[i].src = imgs[i].getAttribute(
"loadpic"
);
}
}
}
setInterval(lazyload,1000);
jQuery的实现:
$(
function
(){
var
viewportSize = $(window).height();
var
lazyload =
function
(){
var
scrollTop = $(window).scrollTop();
$(
"img"
).each(
function
(){
var
_this = $(
this
);
var
x = viewportSize + scrollTop + _this.position().top;
if
(x>0){
_this.attr(
"src"
,_this.attr(
"loadpic"
));
}
})
}
setInterval(lazyload,1000);
})
------------------------------------------------------------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------------------------------------------------
图片延迟加载主要是用来解决一个页面中图片太多,导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多,比如说微店,淘宝等一些图片量较大的网站,采取懒加载也是利于用户体验。
原理即是网页代码中有img标签,但是没有src属性,只是把src原本应该放的图片链接放到另外一个属性值去,比如说data-src,这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接,通过适时把获取到的图片链接赋值给src属性上,这样图片就能在适时的时候渲染出来,而不是一次性全部加载,而是通过鼠标滚动,一个一个加载进来。
基于jQuery的代码(使用前务必引入jQuery):
-
<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
-
<script>
-
$(window).scroll(function() {//窗口滚动的时候(鼠标滚轮的时候。。)
-
$('img').each(function() {//把以下的方法作用到每一个img标签,可自行加限定条件
-
var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
-
var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
-
var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
-
var halfDoc = $(window).height();//获取浏览器窗口可视高度
-
var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
-
var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
-
if(ifElse){//如果条件成立
-
setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值(前面已经获取了)
-
}
-
})//end object 'img'
-
})//end object window
-
</script>
====================================================================================================================================================================
-它的实现原理很简单,先把img的src指向一个小图片,图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" data-src="xxx" />,等到此图片出现在视野范围内了,获取img元素,把data-src里的值赋给src。
(一)获取窗口、窗口滚动和元素距离窗口顶部的偏移高度,计算元素是否出现在窗口可视范围内;
function isShow($el){
var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度
if(top < scrollH + winH){
return true;//在可视范围
}else{
return false;//不在可视范围
} }
(二)监听窗口滚动事件,检查元素是否在可视范围内;
$(window).on('scroll', function(){//监听滚动事件 checkShow(); }) checkShow(); function checkShow(){//检查元素是否在可视范围内 $('img').each(function(){//遍历每一个元素 var $cur = $(this); if(!!isloaded($cur)){return;}//判断是否已加载 if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300)//设置时间是为了更好的看出效果 }; }); }
(三)元素显示的时候把之前的默认照片替换成data-src里的照片。
function showImg($el){ $el.attr('src', $el.attr('data-src')); $cur.data('isloaded',true); }
![](http://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)