题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
height = $node.outerHeight(true);
if(scrollTop + windowHeight > offsetTop && scrollTop < offsetTop + height){
return true
}else {
return false
}
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
height = $node.outerHeight(true);
if(scrollTop + windowHeight > offsetTop && scrollTop < offsetTop + height){
return true
}else {
return false
}
}
$(window).on('scroll',function(){
if(isShow($node)){
console.log('true')
}
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
height = $node.outerHeight(true);
if(scrollTop + windowHeight > offsetTop && scrollTop < offsetTop + height){
return true
}else {
return false
}
}
$(window).on('scroll',function(){
if(isShow($node.not('.show'))){
console.log('true');
$node.addClass('show')
}
})
题目4： 图片懒加载的原理是什么？
首先，为什么要让图片懒加载，因为一个网站的图片可能会非常多，当我们打开一个网页时，如果页面中的所有图片都同时加载的话，可能会造成网页卡顿的情况，此时加载网页中靠下的图片也是没有太大意义的，因为此时用户根本看不见，所以我们要让图片出现在窗口范围内再加载，这样不仅提升了网页性能，也节省了网络资源，这就是懒加载的原理。
- 具体技术实现：
一开始给图片的src设置统一的地址，展示菊花图，同时给每一个图片设置自定义属性data-src，属性值为真正的图片url，当图片出现在窗口中时，将src的默认地址替换为data-src的属性值，这样就实现了图片的懒加载
题目5： 实现视频中的图片懒加载效果
图片懒加载
图片懒加载
题目6： 实现视频中的新闻懒加载效果
新闻懒加载
