如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。
function isVisible($node){
var offsetHeight = $node.offset().top
var windowHeight=$(window).height()
var scrollTop=$(window).scrollTop()
if((offsetHeight>scrollTop) && (offsetHeight<windowHeight+scrollTop)){
return true
}
return false
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function(){
isVisible($('.div1'))
}
})
function isVisible($node){
var offsetHeight = $node.offset().top
var windowHeight = $(window).height()
var scrollTop = $(window).scrollTop()
if((offsetHeight>scrollTop) && (offsetHeight<windowHeight+scrollTop)){
console.log('true')
return true
}
return false
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var isAppear = false //设置初始变量为false；
$(window).on('scroll',function() {
function isVisible($node) {
if (!isAppear) { //当还未打印过true的时候执行函数
var offsetHeight = $node.offset().top
var windowHeight = $(window).height()
var scrollTop = $(window).scrollTop()
if( offsetHeight < scrollTop + windowHeight && offsetHeight > scrollTop ){
console.log ('true')
}
isAppear=true //打印过true时，变量设置为true，后面就不会执行了
}
}
isVisible($('.div1'))
})
图片懒加载的原理是什么？
将所有图片的img标签写入html中
将所有img的src设置为一张白图或loading图片，这样浏览器加载时只需要发送一个请求，因为对于相同内容的请求，浏览器会从缓存中获取数据
将img的真实地址放在data-src自定义属性当中，当img出现在视窗时，再将data-src属性值赋值给src属性
