懒加载

1.什么是懒加载

• 只加载当前窗口范围中的图片
• 在用户滚动页面的时候自动获取更多的数据

2.懒加载的特点

• 通过滚动获取到的新的数据不会影响原有数据的显示
• 加快了网页响应的速度
• 最大程度上减少了服务器端的资源耗用

3.懒加载步骤

• 拿到图片数据后，不要将图片的地址拼接到图片的src属性中，为其设置其他的属性如data-original，来暂存图片地址
• 获取屏幕的高度

var screenHeight = $(window).outerHeight();

• 在图片加载后，获取到所有图片的上边框到document上边框的距离

  this.onload = function () {
      var $this = $(this);
      // 图片距离顶部的值
      var imgScrollTop = $this.offset().top;
  
      // 判断是否在屏幕范围内容
      if (imgScrollTop < screenHeight) {
          // 从data-original中取出值，并放到src属性中
          $this.attr({
              src: $this.attr('data-original')
          });
      }
   }
  

• 判断在滚屏中，图片是否进入用户的视野

  window.onscroll=function (){
      var srcollValue= screenHeight + $(window).scrollTop();
      $('section img').each(function (i, v) {
           var $this = $(this);
           // 图片距离顶部的值
           var imgScrollTop = $this.offset().top;
           if (imgScrollTop <= scrollValue) {
               $this.attr({
                   src: $this.attr('data-original')
               })
           }
       })
  }
  

4.懒加载插件

插件地址：http://www.appelsiini.net/projects/lazyload

使用插件应提前给图片设置高度