jquery懒加载

如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

function isVisible($node){
  var scrollTop=$(window).scrollTop(),
        winH=$(window).height(),
        offsetTop=$node.offset().top;
  if(scrollTop+winH>offsetTop$$scrollTop

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

$(window).on('scroll',function(){
  if(isVisible($node)){
    console.log(true);
  }
})

JSbin

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

  
  


  
内容
  
内容
  
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
  
测试
  
  

JSbin

图片懒加载的原理是什么？

懒加载即曝光加载，当图片曝光在你眼前的时候再去加载。
如果网页中有较多图片，为优化渲染速度，图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,才将真实的地址替换掉占位图片的地址