懒加载和预加载的区别_图片懒加载

链接：懒加载

一、为什么要懒加载

有时候一个网站里面会有几百张甚至几千张上万张图片，这个时候如果所有图片一起加载的话就会导致服务器压力太大了，不仅会影响页面的渲染速度也会浪费宽带。

为了解决这个问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

二、如何实现图片懒加载

两个问题：

1、如何判断图片出现在可视区域。

2、如何加载图片

这两个问题中，第一个问题是重点，怎么样才能知道图片在可视区域里了呢？

要解决这个问题，我们要知道三个参数

1、窗口的高度（height）

2、滚动的距离（scrollTop）

3、元素相对顶点的距离（offset().top）

我们发现，元素相对顶点的值<=滚动的距离+窗口的高度就是图片出现在可视区内。那么换成代码如下

 function  isShow($node){
       return $node.offset().top <= $(window).height()+$(window).scrollTop()
     }

三、如何实现图片加载

图片加载其实只需要用js操作图片的src就可以了，只需要修改图片的地址，代码如下：

  function loadImg($img){
     $img.attr('src',$img.attr('src'))
     $img.attr('data-isLoaded',1)
   }

然后加载图片：

  $(window).on('scroll',function(){
     start()
   })  
 function start(){
       $('.container img').not(['data-isLoaded']).each(function(){
       if (isShow($(this))){
         loadImg($(this))
       }
     })
   }

这个时候基本成型，但是我们发现，我们最初进入页面的时候，其实是没有滚动页面的，这个时候页面什么都没有，我们只需要在最开始加上一个start就可以了，更改后全部的js代码：

  start()
   
   $(window).on('scroll',function(){
     start()
   })    
   
    function start(){
       $('.container img').not(['data-isLoaded']).each(function(){
       if (isShow($(this))){
         loadImg($(this))
       }
     })
   }
     function  isShow($node){
       return $node.offset().top <= $(window).height()+$(window).scrollTop()
     }
   
   function loadImg($img){
     $img.attr('src',$img.attr('src'))
     $img.attr('data-isLoaded',1)
   }

里面写了一个选择的时候不选择['data-isLoaded']，这个是在加载的时候可以看到后面加载还剩多少个，所有加载只用加载一次，优化性能，减轻服务器的压力。