图片延时加载插件 imagesLoaded

imagesLoaded是一个jQuery图片延迟加载插件，用于检测网页中的图片是否加载载完成JavaScript工具库。支持基于回调获取图片加载的进度，还可以绑定自定义事件。可以配合jQuery、RequireJS使用，也可以单独使用。

插件安装
jQuery调用
在RequireJS中使用
独立使用
事件

1. 插件安装

github

插件github网址：imagesloaded。

下载链接

可以点击以下链接下载：

imagesloaded.pkgd.min.js 压缩版
imagesloaded.pkgd.js 未压缩版

通过包管理器安装

通过npm安装：npm install imagesloaded

通过Bower安装：npm install imagesloaded

2. `jQuery`调用

下面并引用imagesloaded后，就可以像jQuery插件一样调用：

$('#container').imagesLoaded( function() {
  // 加载完成
});

// 选项
$('#container').imagesLoaded( {
  // 一些选项…
  },
  function() {
    // 加载完成
  }
);

.imagesLoaded()会返回一个jQuery Deferred对象，这样你就可以通过.always()、.done()、.fail() 和 .progress()方法，在图片加载的不同阶段进行一些处理：

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

3. 在`RequireJS`中使用

imagesloaded也可以RequireJS中使用，在require中可以像下面这样引用：

requirejs( [
  'path/to/imagesloaded.pkgd.js',
], function( imagesLoaded ) {
  imagesLoaded( '#container', function() { ... });
});

通过.makeJQueryPlugin()方法，可以将其转换成jQuery插件：

requirejs( [
  'jquery',
  'path/to/imagesloaded.pkgd.js',
], function( $, imagesLoaded ) {
  // 提供 jQuery 参数
  imagesLoaded.makeJQueryPlugin( $ );
  // 现在可以通过 .imagesLoaded() 方法以jQuery 插件的形式调用
  $('#container').imagesLoaded( function() {...});
});

使用Bower进行依赖管理时，设置baseUrl为bower_components并设置应用配置的路径：

requirejs.config({
  baseUrl: 'bower_components/',
  paths: { // 你的应用路径
    app: '../'
  }
});

requirejs( [
  'imagesloaded/imagesloaded',
  'app/my-component.js'
], function( imagesLoaded, myComp ) {
  imagesLoaded( '#container', function() { ... });
});

4. 独立使用

imagesloaded也可以不依赖其它库，在原生JavaScript中独立使用：

imagesLoaded( elem, callback )
// 加入选项
imagesLoaded( elem, options, callback )
// 也可以通过 `new` 调用
new imagesLoaded( elem, callback )

elem Element、NodeList、Array或选择器
options Object
callback Function - 图片加载后调用

调用callback函数，等价于绑定always事件。

// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// 选择器
imagesLoaded( '#container', function() {...});
// 多 element
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

在原生JS中，通过.on()、.off()、.once()绑定事件监听：

var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log('all images are loaded');
}
// 通过 .on()绑定监听
imgLoad.on( 'always', onAlways );
// 通过 .off()解除绑定
imgLoad.off( 'always', onAlways );

5. 事件

imagesloaded中有一些事件，它们会在特定的时候触发。

always

// jQuery $('#container').imagesLoaded().always( function( instance ) { console.log('ALWAYS - 所有图片加载后'); }); // 原生 JS imgLoad.on( 'always', function( instance ) { console.log('ALWAYS - 所有图片加载后'); });

'always'会在所有图片加载后（加载完成、或不失败）调用

instance imagesLoaded - the imagesLoaded实例

done

// jQuery
$('#container').imagesLoaded().done( function( instance ) {
  console.log('DONE  - 所有图片加载成功');
});

// 原生 JS
imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - 所有图片加载成功');
});

所有图片成功加载后调用

fail

// jQuery
$('#container').imagesLoaded().done( function( instance ) {
  console.log('DONE  - 所有图片已加载，但加载失败');
});

// 原生 JS
imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - 所有图片已加载，但加载失败');
});

所有图片已加载，但加载失败调用

progress

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? '已加载' : '加载失败';
  console.log( '图片' + image.img.src + result);
});

每加载完一张图片（成功或失败）调用一次

instance imagesLoaded - the imagesLoaded实例
image LoadingImage - 刚加载的图片

演示示例及完整文档请查看：imagesLoaded官方文档

1. 插件安装

2. jQuery调用

3. 在RequireJS中使用

4. 独立使用

5. 事件

2. `jQuery`调用

3. 在`RequireJS`中使用