题目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属性中，开始加载图片
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
