如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。
function isVisible($node) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $img.offset().top;
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true
}else{
return false
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。
$(window).on('scroll', function() {
var $node = $('img')
// if($node.hasClass('load')) return
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight()
if (offsetTop + nodeHeight > scrollTop && offsetTop < windowHeight + scrollTop) {
console.log(true)
$node.addClass('load')
} else {
console.log(false)
$node.removeClass('load')
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
var isVisible = true
$(window).on('scroll', function() {
if (!isVisible) return
var $node = $('img')
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight()
if (offsetTop + nodeHeight > scrollTop && offsetTop < windowHeight + scrollTop) {
console.log(true)
isVisible = false
}
})
图片懒加载的原理是什么？
1.设置自定义属性'data-src'，'src'放一张预加载图片地址
<li><a href="#"></a></li>
2.先检查图片是否出现在窗口视野中
3.检查图片是否已经加载完成
4.如果出现在视野中并且图片还未被加载，把图片自定义属性值赋值到src属性里面，替换预加载图片地址
$img.attr('src', $img.attr('data-src'))
