1 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node) {
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
top = $node.offset().top
if(top > scrollH && top < scrollH + winH){
return true
}else {
return false
}
}
2 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node) {
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
top = $node.offset().top
if(top > scrollH && top < scrollH + winH){
return true
}else {
return false
}
}
$(window).on('scroll',function () {
if(isVisible($node)){
console.log('true')
}
})
3 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node) {
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
top = $node.offset().top
if(top > scrollH && top < scrollH + winH){
return true
}else {
return false
}
}
$(window).on('scroll',function () {
if(isVisible($node) && !($node.data('hasLoad'))){
$node.data('hasLoad', true)
console.log('true')
}
})
4 懒加载原理
1.首先把图片的src属性设置为设置为空，或者放入一张空白图片，把图片真实地址放入自定义属性中。
2.当滚动页面时，判断img标签是否出现在视窗内。当img出现在视窗内进行判断图片是否已经加载，若加载过则无需处理，若未加载过则进行加载。
