1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var nodeTop = $node.offset().top
var windowHeight = $(window).height()
var nodeScroll = $(window).scrollTop()
if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
console.log('元素出现在窗口可视范围中')
}
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true
$('window').on('scroll', function(){
var nodeTop = $node.offset().top
var windowHeight = $(window).height()
var nodeScroll = $(window).scrollTop()
if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
console.log(true)
}
})
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
4.图片懒加载的原理是什么？
先设置图片的data-set属性（作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。
代码核心
function lazyRender(){
$('img').each(function(){ //遍历每一张图片
if (checkShow($(this)) && !isLoaded($(this))) { //检测图片是否位于当前窗口中、图片是否已加载
loadImg($(this)) //利用`attr`替换图片属性
}
})
}
