【重点】图片懒加载

图片懒加载理解：由于商城图片过多时，就会给图片加一个懒加载的缓冲效果。当图片进入可视化区域的时候才会加载，否则图片只是一个空标签。这样可以优化页面渲染速度，提升用户体验。

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

所用知识点：

浏览器可视区域的宽高：

js :  document.body.clientWidth/clientHeight

jquery:var windHeight = $(window).width()/$(window).height();

获取滚动条相对于顶部的高度:

js :   document.body.scrollTop;

jquery :   var  scrollTop=$(window).scrollTop;

获得元素对于浏览器顶部的高度:

js :   DOM元素.offsetTop;

jquery:  var imgTop=$('img').offset().top

判断元素是否出现在浏览器的可视化区域内:

元素相对于顶部的高度 - 浏览器可视化区域的高度 < 小于滚动条到顶部的高度  

成立就代表出现 : 不成立就没出现

怎样排除首屏的图片

元素到顶部距离 - 浏览器的可视化高度  >  0

排除已加载的图片

$(this).attr(‘src’) != $(this).attr(‘data-src’)   //排除已加载的图片