懒加载

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

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

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

$(window).on('scroll',function(){
   var windowHeight = $(window).height()
   var scrollHeight = $(winddow).scrollTop()
   var offsetTop = $node.offset().top
   if(offsetTop < windowHeight + scrollHeight && scrollTop < offsetTop){
     console.log(true)
  } 
})

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

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

var fail = false

$(function () {
    $(window).scroll(function () {
        if (isVisible($node) && !fail) {
            console.log(true)
            isEleVisible = true
        }
    })
})

题目4： 图片懒加载的原理是什么？

• 一个网站获取请求要花时间，如果我们一开始就让不在用户视觉范围内的请求一次过加载，这会花很多流量，甚至让网址加载得比较久。
• 把一些需要发送请求的链接，放在一个伪标签，或者一个数组上，当用户尝试去看后面的内容的时候，我们就让数据放到标签上，展示给用户看。