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 isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
console.log('true')
}
return false
}
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
var show = true
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
if(show){
console.log(`true`)
}
show = flase
}
return false
}
4. 图片懒加载的原理是什么？
- 首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
- 页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
- 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
5. 实现视频中的图片懒加载效果
预览 - https://haitaowang555.github.io/JS-/%E6%87%92%E5%8A%A0%E8%BD%BD/index.html
