jQuery lazyload 图片懒加载实现

Posted 野望之风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery lazyload 图片懒加载实现相关的知识,希望对你有一定的参考价值。

现在网站页面内容越来越丰富,图片内容也越来越多,而图片过多会导致网页文件过大,从而引发加载缓慢的问题,而图片懒加载就是为解决这一问题而生。

首先我们来讲Jquery的懒加载控件

 jQuery lazyload.JS

   jQuery lazyload.JS 地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接复制源码到本地

   jQuery lazyload.JS是用 jQuery编写的一个控件,所以要运行 jQuery lazyload.JS必须先载入  jQuery

1、请将下列代码加入</body>前: 

 

  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.lazyload.js"></script>
2、首先图片大小必须设置,然后删除图片的src标签,将图片的地址放在data-original属性上,给懒加载图像一个特定的class(例如:lazy)
代码如下:

  <img class="lazy" alt="" width="800" height="5000" data-original="img/lazy1.jpg" />

  $(function() {
     $("img.lazy").lazyload();
  });
3、效果设置更改
   jQuery lazyload.JS在加载时有很多选项可以设置:
  1、设置临界点
    默认情况下图片是进入屏幕区域后再加载. 如果你想提前加载图片, 可以设置threshold 选项, 比如设置 threshold 为 150 令图片在距离屏幕 150 像素时提前加载.   
    $("img.lazy").lazyload({
       threshold : 200
    });
  2、事件触发加载
    也可以通过各类事件来触发加载,如点击事件:
    $("img.lazy").lazyload({
       event : "click"
    });
  3、特效加载
    默认是调用show()进行加载,你当然可以使用你想要的效果来实现。比如下面的代码使用fadeIn (淡入效果):    
    $("img.lazy").lazyload({
     effect : "fadeIn"
    });
  4、提前加载图片
    你也可以设定提前加载几张图片来提升网页浏览的连贯性,这由failure_limit的值来决定:    
    $("img.lazy").lazyload({
       failure_limit : 2
    });
  5、加载隐藏的图片
    Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false:
    $("img.lazy").lazyload({
       skip_invisible : false
    });
4、为了在某些浏览器或用户未启用JS或js控件加载失败的情况下实现优雅降级, 可以添加noscript标签,然后通过 CSS 先隐藏带控件的img元素,同时让控件执行成功时先运行show()方法将img元素显示出来,再运行懒加载.
最后代码如下:

<style type="text/css">
  img {
  width: 100%;
  }
  .lazy{display: none;}
</style>
<img src="lun1.jpg" ><br>
<img src="lun2.jpg" ><br>
<img data-original="lun1.jpg" class="lazy" ><br>
  <noscript><img src="lun1.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
  <noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun5.jpg" class="lazy" ><br>
  <noscript><img src="lun5.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
  <noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun2.jpg" class="lazy" ><br>
  <noscript><img src="lun2.jpg" ></noscript>
<img data-original="lun1.jpg" class="lazy" >
  <noscript><img src="lun1.jpg" ></noscript>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src=‘jqueryLazyload.js‘></script>
<script type="text/javascript">
$(function() {
  $("img.lazy").show().lazyload({
    effect:‘fadeIn‘
  });
});

</script>

 

 





























以上是关于jQuery lazyload 图片懒加载实现的主要内容,如果未能解决你的问题,请参考以下文章

jquery.lazyload 懒加载失效,图片无法加载

jquery-懒加载技术(简称lazyload)

前端实现图片懒加载

图片懒加载之lazyload.js插件使用

图片懒加载lazyload

jQuery lazyload 懒加载