当前位置:秋叶网络博客 前端编程 ◊ 图片延迟加载、懒加载原理及代码实现

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

作者:秋叶 发表时间:2016年2月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>

这小段代码包含的实用知识点很多,理解好了一定不吃亏~

目录: 前端编程 | 标签: | 6088次阅读