一、问答
1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible
function isVisable($el){
var $win=$(window)
var offsetTop=$el.offset().top;
var scrollTop=$win.scrollTop();
var winH=$win.height();
if(offsetTop<scrollTop+winH){
return true;
}
return false;
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisable($el){
var $win=$(window)
var offsetTop=$el.offset().top;
var scrollTop=$win.scrollTop();
var winH=$win.height();
if(offsetTop<scrollTop+winH){
return true;
}
return false;
}
$(window).on("scroll",function(){
var $node=$("#ct1");
if(isVisable($node)){
console.log(true);
}
})
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisable($el){
var $win=$(window)
var offsetTop=$el.offset().top;
var scrollTop=$win.scrollTop();
var winH=$win.height();
if(offsetTop<scrollTop+winH){
return true;
}
return false;
}
$(window).on("scroll",function(){
var $node=$("#ct1");
if($node.data("hasShow")) return;
if(isVisable($node)){
console.log(true);
$node.data("hasShow",true)
}
})
4.图片懒加载的原理是什么？
1.图片不立即显示或者使用一个统一的空白图片替代
2.图片对应的标签上有"data-img" 属性存储图片的真正地址
3.当用户翻到图片位置时后者在下一页即将要翻到时，将"data-img" 属性赋值给img标签的 "src" 属性上；
4.具体实现需要 监听 窗口的 "scroll" 事件，当"scroll" 事件触发时，标签的位置小于 window窗口的高度+scroll的高度(如果提前一页加载就不需要加上window窗口的高度)；
二、代码
本教程版权归小韩同学和饥人谷所有，转载须说明来源
