懒加载

1. 写一个函数isVisible判断一个元素时否出现在窗口可视范围

function isVisible($node){
  var scrollTop = $(window).scrollTop();
  var wHeight = $(window).height();
  var offsetTop = $node.offset().top;
 
  if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
    console.log(true);
    return true;
  }
  return false;
}

2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围,每次出现都在控制台打印 true

$(function(){

  function isVisible($node){
  var scrollTop = $(window).scrollTop();
  var wHeight = $(window).height();
  var offsetTop = $node.offset().top;
  if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
    console.log(true);
  }
}
 $(window).on("scroll",function(){
     isVisible($node)
  })
})

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

$(function(){
  var hasCome= false;

  function firstEnter($node){
  if(hasCome){return}
  var scrollTop = $(window).scrollTop();
  var wHeight = $(window).height();
  var offsetTop = $node.offset().top;
  
  if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
    console.log(true);
    hasCome = true;
  }
}
 $(window).on("scroll",function(){
     isVisible($node)
  })
})

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

当一个网站上的图片资源很多的时候，如果把资源一次性请求过来，会造成页面加载过慢，并且服务器压力也会过大。这时，如果能先请求加载用户能看到的图片，不能看到的图片先不请求，等待图片进入可视区的时候再加载，这样分批请求加载可以解决上述困境。

其原理：，先把img元素或是其他元素的背景图片路径不设置，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。判断图片是否进入可视区，监听页面的滚动scroll事件，获取

• 滚动的距离scroll（垂直$(window).scrollTop(),水平距离$(window).srollLeft()），
• 页面可视距离window(垂直$(window).height(), 水平$(window).width()),
• 元素距离窗口边距的距离offset（垂直offset().top,水平offset().left）,

进入可视区的条件是

offset < scroll + window && offset >= scroll

5. 懒加载实例

效果→效果