如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。
-
原理：获取这个元素的绝对位置，判断它的纵坐标是否在可视窗口之间；可视窗口：垂直滚动距离 ~ 垂直滚动距离+窗口高度
代码实现（jQuery）： function isVisible($node) { var scrollTop = $(window).scrollTop() var windowVisible = scrolltop + $(window).height() var offsetTop = $node.offset().top if (offsetTop < windowVisible && offsetTop > scrolltop) { return true } return false }
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。
代码实现（调用上面的isVisble方法）：
$(node).('scroll', function () {
if (isVisible($(this))) {
console.log(true)
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
代码实现：
function isVisible($node) {
var scrollTop = $(window).scrollTop()
var windowVisible = scrolltop + $(window).height()
var offsetTop = $node.offset().top
if (offsetTop < windowVisible && offsetTop > scrolltop && !$node.data.visible) {
$node.data('visible', 1)
return true
}
return false
}
$(node).('scroll', function () {
if (isVisible($(this))) {
console.log(true)
}
})
图片懒加载的原理是什么？
- 一：先将img标签src属性设置为空，在图片出现在可视窗口时再给它添加src属性。
- 二：先加载一部分图片，在浏览器滚动到接近底部时再动态生成img标签。
