如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
//jQuery写法
function isVisible($element) {
let windowHeight = $(window).height()
let elementOffsetTop = $element.offset().top //获取元素距离document顶端距离
let scrollTop = $(window).scrollTop() //获取窗口滚动距离
if(scrollTop + windowHeight > elementoOffsetTop && scrollTop < elementOffsetTop) {
//出现了
return true
} else {
//没出现
return false
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
let $elemrnt = $(element)
$(window).on('scroll',function() {
if(isVisible($element)) {
console.log('true')
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
let $element = $(element）
$(window).on('scroll',function() {
if($element.attr('loaded')) {
return
}
if(isVisible($element)) {
console.log('true')
$element.attr('loaded', true) //元素已出现
}
})
图片懒加载的原理是什么？
图片懒加载的核心逻辑是判断图片是否出现在可视界面，当图片出现在可视范围时才加载图片。
1.可以将图片src存入一个自定义属性，例如：data-src
2.判断元素是否出现在可视区域
3.一旦图片出现在可视区域，改变src的值
5
http://js.jirengu.com/zehidameva/2/edit
