懒加载是网站解决性能问题最常见的方式
题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offset = $node.offset().top
if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
return true
}
return false
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
$(window).on("scroll", function(){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offset = $node.offset().top
if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
console.log('true')
}
})
}
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var $span = $('#span1')
$(window).on('scroll', function(){
if($span.attr('show')){
return
}
if(isVisible($span)){
$span.attr('show', true)
console.log('true')
}
})
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offset = $node.offset().top
if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
return true
}else{
return false
}
}
题目4： 图片懒加载的原理是什么？
延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。
【1】延时加载，使用setTimeout或setInterval两种方式来造成加载延迟，若用户在加载前就离开，就不再加载。
【2】条件加载，符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。
