题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
var windowHeight = $(window).height;//可视窗口的高度
var offsetTop = $node.offset().top;//元素到根节点的垂直距离
if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
return true;
}
return false;
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
var windowHeight = $(window).height;//可视窗口的高度
var offsetTop = $node.offset().top;//元素到根节点的垂直距离
if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
return true;
}
return false;
}
$(window).on('scroll',function(){
console.log(isVisible($('.node')))
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var $node = $('.node');
function isVisible($node){
var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
var windowHeight = $(window).height;//可视窗口的高度
var offsetTop = $node.offset().top;//元素到根节点的垂直距离
if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
return true;
}
return false;
}
function isLoaded($node){
return ($node.data('isLoaded') === 'yes');
}
$(window).on('scroll',function(){
if( isVisible($node) && !isLoaded($node) ){
$node.data('isLoaded', 'yes');
console.log('true');
}
})
题目4： 图片懒加载的原理是什么？
为了整体网站的性能考虑，是一种延时加载图片的方法。把图片真实的URL 放在data-img的值中,当图片进入可视区域时把data-img赋给src。
题目5： 实现视频中的图片懒加载效果
效果
