实现原理：
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); }
