题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
//判断最上边元素出现在视野中:元素距离页面顶部的长度>滚动的长度
// 判断最下边元素出现在视野中:元素距离页面顶部的长度<滚动的长度+窗口长度
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
题目2:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
//滚动时判断是否可见
function scroll($node) {
$(window).on("scroll", function () {
if (isVisible($node)) {
console.log("true")
}
})
}
题目3:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
题目3代码
题目4: 图片懒加载的原理是什么?
- 为了让浏览器不去加载img,将img的src链接设为同一张白色图片占位,将真实的图片地址放在自定义属性(如data-src)当需要加载图片时,把data-src中的图片地址赋给img的src
- 当js监听到该图片元素进入窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
- 设置何时加载:滚动页面时,检查页面所有的img标签,判断这个标签是否出现在我们的视野,当出现在我们的视野中,再去判读是否已经加载过,若未加载,则将自定义属性中的地址存储到src属性中。
题目5: 实现视频中的图片懒加载效果
题目5代码
题目6:实现新闻自动懒加载效果
题目6代码