回答:
1.何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一函数 isVisible实现
function isVisible($node){
var $windosHeight = $(window).height(),//窗口高度
$windosScrollTop = $(window).scrollTop(),//窗口滚动高度
$nodeHeight = $($node).height(), //节点cotentarea 高度
$nodeOffsetTop = $($node).offset().top; //节点距根节点高度
if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
//在可视区域内
return true
}
return false;
}
元素距离根元素的高度 < 窗口高度 + 窗口滚动高度;
窗口滚动高度 < 元素距离根元素的高度 + 元素本身高度;
2.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll', function() {
if(isVisible($node)) {
console.log('true');
}
})
3.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
<script>
var $visible = $('.visible');
var flag = true;
$(window).on('scroll', function() {
if(flag) {
isVisible($visible);
}
})
function isVisible($node) {
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
console.log('true');
flag = false;
return true;
}else{
return false;
}
}
</script>
4.图片懒加载的原理是什么?
当用户往下滚动窗口,图片进入window窗口(用户可见)就会加载。正常的时候图片地址是放在自定义属性上,用户滚动窗口后才将地址赋值给src,这样优化了代码的性能。