1. 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(), //窗口高度
scrollTop = $(window).scrollTop(), //滚动条滚动距离
offsetTop = $node.offset().top, //元素距页面顶端高度
nodeHeight = $node.outerHeight(true); //包括外边距
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
return true;
}else{
return false;
}
}
2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){
if(isVisible($node)){
console.log(true)
}
});
3. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true); //包括外边距
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
return true;
}else{
return false;
}
}
$(window).on('scroll',check);
function show($node){
$node.each(function(){
$(this).addClass('load'); //已经加载的元素添加class:load
console.log(true)
});
}
function check($node){
$node.not('.load').each(function(){ //遍历未添加class为load的元素
if(isVisible($(this))){
show($(this))
}
});
}
4. 图片懒加载的原理是什么？
将页面里所有img元素的src属性用data-src代替，将页面内未出现在可视区域内的图片先不做加载，其src值为一张空白图或其他，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。
5. 实现视频中的图片懒加载效果
6. 实现视频中的新闻懒加载效果
代码地址 (本地测试可行)
