题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
<div class="elem">hello</div>
<script>
function isVisible($node){
var elemTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
return true;
}
return false;
}
var result=isVisible($(".elem"));
</script>
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
//方法一：设置2个变量past、now，每次滚动比较2个变量，如果past显示没出现，now出现了，说明是出现了，在控制台输出。
//每次必须把now的值赋值给past,用来记录上一次的值
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
var clock,now;
var past=isVisible($(".elem")); //past表示刚载入页面isVisible返回的值
$(window).on("scroll",function(){
if(clock) clearTimeout(clock);
clock=setTimeout(function(){
now=isVisible($(".elem")); //每次滚动鼠标记录isVisible返回的值
if(past===false&&now===true){ //当上一次的记录的值为false并且这次滚动记录的值为true是输出true
console.log("true");
}
past=now; //每次记录isVisible的值传递给past
},300);
});
function isVisible($node){
var elemTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
return true;
}
return false;
}
</script>
//方法二：方法和第一种类似，只是把past的值绑定到元素中,记录元素的状态，然后进行比较
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
var clock;
$(window).on("scroll",function(){
if(clock) clearTimeout(clock);
clock=setTimeout(function(){
if(isVisible($(".elem"))===true&&$(".elem").attr("visible")==="false"){
console.log("true");$(".elem").attr("visible","true");
}
noVisible($(".elem"));
},300);
});
function noVisible($node){
if(isVisible($node)===false) $node.attr("visible","false");
}
function isVisible($node){
var elemTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
return true;
}
return false;
}
</script>
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
//方法一：
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
var clock,now;
var past=isVisible($(".elem"));
$(window).on("scroll",function(){
if(now!==true){ //用now记录isVisible的值，看是否为true
if(clock) clearTimeout(clock);
clock=setTimeout(function(){
now=isVisible($(".elem"));
if(past===false&&now===true){
console.log("true");
}
},300);
}
});
function isVisible($node){
var elemTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
return true;
}
return false;
}
</script>
//方法二：
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
var clock;
noVisible($(".elem"));
$(window).on("scroll",function(){
if($(".elem").attr("visible")==="false"){
if(clock) clearTimeout(clock);
clock=setTimeout(function(){
if(isVisible($(".elem"))===true){
console.log("true");$(".elem").attr("visible","true");
}
},300);
}
});
function noVisible($node){
if(isVisible($node)===false) $node.attr("visible","false");
}
function isVisible($node){
var elemTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
return true;
}
return false;
}
</script>
题目4：图片懒加载的原理是什么？
图片懒加载的目的是为了解决网站性能问题，减少请求资源的浪费。
1、 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2、 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
题目5：实现视频中的图片懒加载效果
题目6(选做)：实现如下 新闻自动懒加载效果
(mission 16)
