题目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)