如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop=$(window).scrollTop(),
winH=$(window).height(),
offsetTop=$node.offset().top;
if(scrollTop+winH>offsetTop$$scrollTop<offsetTop){
return true;
}else{
return false;
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function(){
if(isVisible($node)){
console.log(true);
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>内容</p>
<p>内容</p>
<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
<p class="test">测试</p>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var $test=$('.test');
$test.data('flag',true);
function isVisible($node){
var scrollTop=$(window).scrollTop(),
winH=$(window).height(),
offsetTop=$node.offset().top;
if(scrollTop+winH>offsetTop&&scrollTop<offsetTop){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){
if(isVisible($test)&&$test.data('flag')){
console.log(true);
$test.data('flag',false);
}
});
</script>
</body>
</html>
图片懒加载的原理是什么？
懒加载即曝光加载，当图片曝光在你眼前的时候再去加载。
如果网页中有较多图片，为优化渲染速度，图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,才将真实的地址替换掉占位图片的地址
