前端优化之图片预加载和延迟加载

预加载  ：

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可享受到极快的加载速度。

比如预加载这三张图片：

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">

函数声明：

function preloadimg(array){
    var newimg=[];
    for(var i=0;i<array.length;i++){
         newimg[i]=new Image();
         newimg[i].src=array[i];
   }
}

执行函数：

<span style="font-size:24px;">preloadimg(['1.jpg','2.jpg','3.jpg']);</span>

图片延迟加载：

  1、利用基于jQuery的lazyload插件：

     

引用jQuery和lazyload文件

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js"></script>

</pre>     <p></p><p><span style="font-size:24px">图片加入样式lazy；路径引用使用data-original; </span></p><p><span style="font-size:24px"></span></p><pre name="code" class="html"><img class="lazy" data-original="1.jpg">
<img class="lazy" data-original="2.jpg">
<img class="lazy" data-original="3.jpg">

       

js初始化插件并设置图片出现方式：

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({

             //图片方式渐现
             effect: "fadeIn",

            //图片距离屏幕200px时加载图片

             threshold:200,

       });
  });
</script>

2、利用js或jQuery：

  因为要延迟加载，所以html结构中img标签的src属性去掉，把路径付给自定义另外一个属性d-src。

html结构：

<img  d-src="1.jpg">
<img  d-src="2.jpg">

js:循环遍历每一个img,判断当图片的一半在可视区域时，加载图片；

<script>
    $(document).ready(function(){
        $('img').each(function(){
             if($(this).offset().top+$(this).height()/2<window.innerHeight){
                  $(this).attr('src',$(this).attr('d-src'));
              }
        }) 
})
<script>

这样就基本实现了自己想要的效果。