如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
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) {
return true;
} else {
return false;
}
}
当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).scroll(function(){
if(isShow($('#hello'))){
console.log(true);
}else{
console.log(false);
}
})
function isShow($node) {
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
return true;
} else {
return false;
}
}
当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
$(window).scroll(function () {
if ($('#hello').not('.load').length === 1 && isVisible($('#hello'))) {
console.log(true);
$('#hello').addClass('load');
} else {
console.log(false);
}
})
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) {
return true;
} else {
return false;
}
}
图片懒加载的原理是什么?
- 在页面载入的时候将页面上的图片地址指向一张图片,等图片进入窗口可视区域时,把在自定义属性中的真实图片地址放入src属性中,实现当前区域加载。
实现视频中的图片懒加载效果
实现视频中的新闻懒加载效果
test.gif