javascript 图片懒加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tangtang5963/article/details/47448063

对于有较多图片的网页，如果我们一次把图片全部加载完会严重影响页面加载速度和浪费带宽的，在这种情况下就需要用到懒加载。懒加载的实现原理是，在可视区域内的图片先加载出来，没有在可视区内的图片先用一张默认的小图片代替。随着页面的滑动，下边的图片逐步替换成真实的图片。很多网站都用了懒加载技术。下边是唯品会首页使用懒加载展示：

jQuery LazyLoad  官网参考地址

基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。

使用方法：

需要先引入jquery和jquery.lazyload两个js文件

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

页面上需要用到懒加载的图片要这样改写代码，要加上class="lazy"，真实图片链接地址写在data-original里，src里是我们想要显示的默认小图片,注意图片要加上宽度和高度，避免真实图片和默认图片大小不一致造成页面布局错位。

<img class="lazy" src="loading.gif" data-original="example.jpg" style="width:200px;height:200px;">

在js中要这样调用lazyload

$('img.lazy').lazyload();

本文只是粗略的介绍一下懒加载的使用方法，如果想了解更多懒加载请参考下边这篇文章

插件下载地址：http://code.ciaoca.com/jquery/lazyload/

layzr  官网参考地址

layzr.js 是一个很小、速度快、无依赖的，用于浏览器图片延迟加载的库，不需要依赖jquery，也更适合移动端。

使用方法：

引入js文件

<script src="layzr.js"></script>

页面上需要用到懒加载的图片要这样改写代码

<img src="loading.gif" data-layzr="example.png">

js中调用layzr

var layzr = new Layzr({
  selector: '[data-layzr]',
  attr: 'data-layzr',
  retinaAttr: 'data-layzr-retina',
  threshold: 10,
  callback: function () {
    this.classList.add('border');
  }
});

参考地址：点击打开链接