懒加载

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

实现

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

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

$(window).on('scroll',function(){
 console.log(isVisible($('#box')))
})

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

var $box = $('#box')

function isLoaded($node){
  return ($node.data('flag')===1)
}

$(window).on('scroll',function(){
 if( isVisible($box) && !isLoaded($box) ){
   $box.data('flag',1)
   console.log('true')
 }
})

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

将img标签中的src链接设为同一张图片占位（只需请求一次），将其真正的图片地址存储在img标签的自定义属性中（比如data-src）。

• 条件加载：符合某些条件，或触发了某些事件，才将自定义属性中的地址存储到src属性中，开始加载图片
• 可视区加载：仅加载用户可以看到的区域。当js监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，开始加载图片

这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

题目5： 实现视频中的图片懒加载效果

效果