图片延时加载插件 imagesLoaded

 2016年05月05日    87     声明


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


  1. 插件安装
  2. jQuery调用
  3. RequireJS中使用
  4. 独立使用
  5. 事件

1. 插件安装

github

插件github网址:imagesloaded


下载链接

可以点击以下链接下载:

通过包管理器安装

通过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进行依赖管理时,设置baseUrlbower_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 ElementNodeListArray或选择器
  • 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官方文档