问答：
1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之前，肉眼可见）。写一个函数isVisible实现。
当一个元素的底部不超过浏览器的上边缘（元素本身的高度+元素在文档中的的高度>滚动条滚动的距离），顶部不超过浏览器的下边缘（元素在文档中的高度<窗口的高度+滚动条滚动的距离），就可以说这个元素是在窗口的可视范围之内的。
function isVisible($node){
var nodeH = $node.height();//获取元素本身的高度
var nodeTop = $node.offset().top;//获取元素在文档中的高度
var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
var winH = $(window).height();//获取窗口的高度。
return (nodeH+nodeTop > scrollTop && nodeTop < scrollTop + winH ) ? true : false//条件判断。
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on("scroll",function(){//对窗口添加滚动事件监听
if(isVisible($node)){//如果函数返回为true时，即代表指定元素出现在窗口可视范围内
console.log(true);//控制台打印true。
}
});
function isVisible($node){
var nodeH = $node.offset().top;//获取元素在文档中的高度
var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
var winH = $(window).height();//获取窗口的高度。
return (nodeH < scrollTop + winH) ? true : false//进行距离判断。
}
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var isLoad; //设置一个状态锁
$(window).on("scroll",function(){
if(isVisible($node) && isLoad){//如果函数返回为true，且状态锁为true时，控制台才打印true
console.log(true);
isLoad = false;//当元素第一次出现并且执行代码后，使状态锁为false，这样元素下次再出现时不在做任何处理。
}
});
function isVisible($node){
var nodeH = $node.offset().top;//获取元素在文档中的高度
var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
var winH = $(window).height();//获取窗口的高度。
return (nodeH < scrollTop + winH) ? true : false//进行距离判断。
}；
4.图片懒加载的原理是什么？
将图片地址存放在自定义属性中，当完成某种事件操作后，再将图片地址放在正常的img属性中，完成图片的加载。这样做的好处是能大大减少网页加载的时间。
代码：
1.实现如下回到顶部效果,当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。
2.实现如下图片懒加载效果
3.实现如下无限滚动效果
本文版权归本人和饥人谷所有，转载请注明来源。
