题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ){
return true;
}
else {
return false;
}
}
题目2:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function(){
if(isVisible($('p'))){
console.log(true);
}
})
题目3:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
var isVis = false; //设置一个标志位
$(window).on("scroll",function(){
if(!isVis){
isVisible($(".test")); //不可见才进入isVisible函数
}
else{
return; //一旦标志位为true,那么就不做任何处理
}
})
function isVisible($node){
var winH = $(window).height(),
offsetY = $node.offset().top;
if( (scrollY+winH) > offsetY ){
console.log("true");
isVis = true; //第一次出现,设为true
return true;
}
else{
console.log("false");
return false;
}
}
题目4: 图片懒加载的原理是什么?
在图片加载前可以将图片设置为一个空白的图片或者加载中图片,在图片可视(offsetH < winH + scrollH)时将图片通过设置ajax 或者 data属性来加载图片,这样就能避免加载网页同时加载大量图片引起的页面卡顿情况。
题目5: 实现视频中的图片懒加载效果
lazyloadimg{
display: block;
height: 200px;
margin: 5px auto;
}
var img =''
for(var i=0;i<20;i++){
img += '![](http://fakeimg.pl/300x200/)' //错误1,少加了一个分号,log到怀疑人生
}
$('body').append(img)
lazyLoad();
//每次都是全部加载了,log到。。,原来img没设置高度
$(window).scroll(function(){
lazyLoad();
})
function lazyLoad(){
$('img').each(function(){
if(isVisible($(this))&&!isLoaded($(this))){
loadImg($(this))
}
})
}
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < windowHeight + scrollTop&&offsetTop > scrollTop){
return true
}
}
function isLoaded($node){
if($node.attr('src') === $node.attr('data-src')){
return true
}
return false
}
function loadImg($node){
$node.attr('src',$node.attr('data-src'))
}