题目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 。用代码实现
题目3:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
题目4: 图片懒加载的原理是什么?
- 懒加载也叫延迟加载,举个栗子比如图片的懒加载:先在img src中放一张占位符图片,而真实的图片地址存放在相对应一个属性 data-img(后缀img可以自定义)中,这样的话页面加载的时候只加载src地址,不会对属性的图片真正地址加载,滚动时候判断待加载的资源相对于浏览器顶端的距离,可视区域相对于浏览器顶端的距离如果为true的话 则把相对应的data-img值赋值给src否则不加载。
题目5: 实现视频中的图片懒加载效果
题目6: 实现视频中的新闻懒加载效果