题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible(ele)
{
var offsettop=$(ele).offset().top;
var windowscrolltop=$(window).scrollTop();
var docHeight= $(document).height();
if((offsettop< windowscrolltop+docHeight)&&(offsettop>windowscrolltop))
{
return true;
}
return false;
}
image.png
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible(ele)
{
var offsettop=$(ele).offset().top;
var windowscrolltop=$(window).scrollTop();
var windowHeight= $(window).height();
if((offsettop< windowscrolltop+windowHeight)&&(offsettop>windowscrolltop))
{
return true;
}
return false;
}
//普通做法如下：
$(window).on('scroll',function(){
console.log(isVisible('.box'));
//一般的做法，缺点是滚动一次会触发很多次事件，当执行的代码很多时，对用户的体验会很不好
})
//优化的角度，每次滚动停止时触发，这样可以做到优化代码的功能 。
//下面是优化的代码：
var s;
$(window).on('scroll',function(){
if(s)
{
clearTimeout(s);
}
s=setTimeout(function(){
console.log(isVisible('.box')) ;
},300);
})
总结一般的做法，缺点是滚动一次会触发很多次事件，当执行的代码很多时，对用户的体验会很不好
优化的角度，每次滚动停止时触发，这样可以做到优化代码的功能
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible(ele)
{
var offsettop=ele.offset().top;
var windowscrolltop=$(window).scrollTop();
var windowHeight= $(document).height();
var nodeHeight=$(ele).height();
if((offsettop< windowscrolltop+windowHeight)&&(nodeHeight+offsettop>windowscrolltop))
{
return true;
}
return false;
}
function Firstappear(ele)
{ //如果拥有show这个class表明不是第一次出现
if(ele.hasClass("show"))
{
return false;
}
else
{
ele.addClass("show");
//第一次出现则添加show
return true;
}
}
$(window).on('scroll',function(){
//一般的做法，缺点是滚动一次会触发很多次事件，当执行的代码很多时，对用户的体验会很不好
if(isVisible($('.box'))&&Firstappear($('.box'))){
console.log("first show");
}
})
//优化的角度，每次滚动停止时触发，这样可以做到优化代码的功能，下面时优化的代码
/*var s;
$(window).on('scroll',function(){
if(s)
{
clearTimeout(s);
}
s=setTimeout(function(){
if(isVisible($('.box'))&&Firstappear($('.box'))){
console.log("first show");
} ;
},300);
})*/
image.png
代码显示地址：https://jsbin.com/wowasafufu/edit?html,js,console,output
题目4： 图片懒加载的原理是什么？
当页面滚动的时候，图片出现在窗口可视范围内的时候进行加载，否在不加载。
没有出现在窗口的可是范围的时候，将img标签的图片地址设置在data-src属性上，等到出现在宽口的可是范围的时候，再将data-src的值赋值给src。
图片的懒加载的作用
1.提高了用户的使用体验，不用等到图片全都加载后再显示，而是慢慢出现在窗口的可视范围之内。
2.减轻了服务器的负载，因为不需要全部将内容发送给浏览器。
题目5： 实现图片懒加载效果
思路是：筛选出不是没有加载的图片（即没有'show'的class），然后将查看是否在窗口范围内，是的就将data-src的属性值赋值给src，然后添加'show'这个class
var s;
var imgs=$("ul>li>img").not('.show');
function isVisible(ele)
{
var offsettop=ele.offset().top+300;
var windowscrolltop=$(window).scrollTop();
var windowHeight= $(window).height();
var nodeHeight=$(ele).height();
if((offsettop< windowscrolltop+windowHeight)&&(nodeHeight+offsettop>windowscrolltop))
{
return true;
}
return false;
}
function imgload(ele)
{
ele.attr('src',ele.attr('data-src'));
ele.addClass('show');
}
function lazyLoad(ele)
{
if(isVisible($(ele)))
{
imgload($(ele));
}
}
$(window).on('scroll',function()
{
if(s)
{
clearTimeout(s);
}
s=setTimeout(function( )
{$.each(imgs,function(index,img)
{
lazyLoad(img);
});
},300);
});
代码地址：https://jsbin.com/qifoyesape/2/edit?js,output
题目6：
代码地址https://github.com/HappyXll/WEB-KNOWLEDGE/tree/master/ajax-lazy-loading
ScreenGif.gif
总结 窗口的可视高度是 $(window).height()而不是$(document).height()，这是整个文档的高度啊！
