图片延迟加载、懒加载原理及代码实现

作者：秋了秋发表时间：2016年02月06日

图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

原理即是网页代码中有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>