实现图片懒加载

  在电商网站中，首页经常需要一次性加载很多图片，但有些不在可视区域内的图片也在刚进来就加载未免太浪费资源。于是在前几天的公司项目中我就实验性的试了下懒加载。

懒加载核心思路：将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

  上项目代码

1
2
3

<div class="box_left">
  <img src="/public/static/img/default.jpg" data-src="${imgpath[0]}" alt="" class="lazyimg">
</div>

default.jpg是一张灰色背景的公司logo，ajax加载时先把真实路径放到“data-url”里面，然后滚动的高度加上网页可视区域的高度有没有大于该图片距离网页顶部的高度。

var imgs = document.getElementsByClassName('lazyimg');
var scrollheight=$(document).scrollTop();//滚动的高度
var screenheight=document.documentElement.clientHeight;//网页可视区域高度
for (var j = 0; j < imgs.length; j++) {
  var imgheight=imgs[j].offsetTop;//图片的div盒子距离顶部的高
  if (imgheight< scrollheight+screenheight) {
    imgs[j].src=imgs[j].getAttribute("data-src");//把真实路径赋值给src
  }
}