懒加载

懒加载的原理

• 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
• 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

代码实现

• 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内：

$(window).on("scroll", function{
    if (isVisible($node)){
        console.log(true);
    }
})

• 1
• 2
• 3
• 4
• 5

• 我们已经很接近了，现在我们要做的是，让元素只在第一次被检查到时打印true，之后就不再打印了

var hasShowed = false;
$(window).on("sroll",function{
    if (hasShowed) {
        return;
    } else {
        if (isVisible($node)) {
            hasShowed = !hasShowed;
            console.log(true);
        }
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

咦，我们好像已经实现了懒加载。 
下面是我的实现：

• 展示、代码

无限滚动

利用懒加载和AJAX，我们还可以实现无限滚动查看时间线的效果，下面是我的实现： 
- 展示、代码

回到顶部

利用懒加载的原理，我们还可以实现在滚动页面一段距离后，出现回到顶部按钮的这种效果，下面是我的实现 
- 展示、代码

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.youkuaiyun.com/weixin_35955795/article/details/54411516

 

• qq_35296427

  2017-06-26 20:282楼
  1条回复   回复
• 还有你第一个案例里
  $(window).on("scroll", function(){
  if (clock) {
  clearTimeout(clock);
  }
  clock = setTimeout(function(){
  checkShow();
  }, 200);
  //checkShow();
  })
  这个定时器的作用我没懂

• 
  
  
  

• qq_35296427

  2017-06-26 19:481楼
  回复
• var hasShowed = false;
  $(window).on("sroll",function{
  if (hasShowed) {
  return;
  } else {
  if (isVisible($node)) {
  hasShowed = !hasShowed ;//少了这个吧
  console.log(true);
  }
  }
  })