懒加载

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

 function isVisible($node){
   var offsetHeight = $node.offset().top
   var windowHeight=$(window).height()
   var scrollTop=$(window).scrollTop()
   if((offsetHeight>scrollTop) && (offsetHeight<windowHeight+scrollTop)){
      return true
  }
      return false
 }

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

$(window).on('scroll',function(){
     isVisible($('.div1'))
   }
})
function isVisible($node){
  var offsetHeight = $node.offset().top
  var windowHeight = $(window).height()
  var scrollTop = $(window).scrollTop()
  if((offsetHeight>scrollTop) && (offsetHeight<windowHeight+scrollTop)){
      console.log('true')
      return true
  }
      return false
 }
}

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

var isAppear = false  //设置初始变量为false；
  $(window).on('scroll',function() {
   function isVisible($node) {
      if (!isAppear) {   //当还未打印过true的时候执行函数
          var offsetHeight = $node.offset().top
          var windowHeight = $(window).height()
          var scrollTop = $(window).scrollTop()
      if( offsetHeight < scrollTop + windowHeight && offsetHeight > scrollTop  ){
        console.log ('true')
        }
        isAppear=true  //打印过true时，变量设置为true，后面就不会执行了
      }
   }
    isVisible($('.div1'))  
 })

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

将所有图片的img标签写入html中
将所有img的src设置为一张白图或loading图片，这样浏览器加载时只需要发送一个请求，因为对于相同内容的请求，浏览器会从缓存中获取数据
将img的真实地址放在data-src自定义属性当中，当img出现在视窗时，再将data-src属性值赋值给src属性