jquery懒加载、回到顶部

问答

1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

 function isVisible($node){
 var scrollH=$(window).scrollTop(),
 winH=$(window).height(),
 top=$node.offset().top;
 if((top > scrollH)&&(top < scrollH + winH )){
 return true;
 }
 else{
 return false;
 }
 }
 

2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

 $(window).on('scroll',function(){
 isVisible($node);
 });
 function isVisible($node){
 var scrollH=$(window).scrollTop(),
 winH=$(window).height(),
 top=$node.offset().top;
 if((top > scrollH)&&(top < scrollH + winH )){
 console.log('true');
 return true;
 }
 else{
 return false;
 }
 }
 

3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

 $(window).on('scroll',function(){
 if($node.attr('isLoaded')){
 return;
 }
 isVisible($node);
 });
 function isVisible($node){
 var scrollH=$(window).scrollTop(),
 winH=$(window).height(),
 top=$node.offset().top;
 if((top > scrollH)&&(top < scrollH + winH )){
 console.log('true');
 $node.attr('isLoaded',true);
 return true;
 }
 else{
 return false;
 }
 }
 4.图片懒加载的原理是什么？
 懒加载即曝光加载，当图片曝光在你眼前的时候再去加载，
 本质上的作用是解决性能问题。当窗口高度+抽动的距离大
 于其到顶部的距离时可见，即winH+scrollTop>offesetTop
 防止img为空值的时候浏览器出现×，设置img为相同的一个
 白图,当图片出现在浏览器可视范围内的时候,替换图片为真正的图.
 
 
版权归吴秀芳和饥人谷所有，若有转载，请注明来源