懒加载

题目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()，这是整个文档的高度啊！