imagesLoaded 图片加载完成后执行的 JavaScript 插件

Question

imagesLoaded 是一个检查图片是否加载完成的 JavaScript 插件，在 Masonry 中就使用了这一个插件，避免在运行代码的时候无法获取图片的高度和宽度。

安装插件

您可以下载源文件引入您的项目中

• imagesloaded.pkgd.min.js
• imagesloaded.pkgd.js

或通过 Bower 安装: bower install imagesloaded

或通过 npm 安装: npm install imagesloaded

使用方法

imagesLoaded( elem, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )

• elem 元素、 节点列表、 数组或选择器字符串
• callback 函数-函数触发后已加载的所有图像

使用一个回调函数是一样将它绑定到 always 事件 （见下文）。

// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

事件方法

imagesLoaded 是事件发送者。您可以将事件侦听器绑定到事件。

var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log('all images are loaded');
}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );

1、always

imgLoad.on( 'always', function( instance ) {
 console.log('ALWAYS - all images have been loaded');
 });

触发后的所有图像都已加载或证实破碎。

• instanceimagesLoaded -imagesLoaded 实例

2、done

imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

触发后所有已成功加载映像没有任何损坏的图像。

3、fail

 imgLoad.on( 'fail', function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

触发后的所有图像都已都加载与至少一个断开的图像。

4、progress

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

已加载的每个图像后触发。

• instanceimagesLoaded -imagesLoaded 实例
• imageLoadingImage -LoadingImage 实例与加载的图像

变量属性

• LoadingImage.img：图片元素
• LoadingImage.isLoaded：返回布尔值-true 的图像具有成功加载的时候
• imagesLoaded.images：检测到的每个图像的 LoadingImage 实例的数组

var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    var image = imgLoad.images[i];
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  }
});

与 jQuery 使用

如果您包括 jQuery，imagesLoaded 可以用作一个 jQuery 插件。

$('#container').imagesLoaded( function() {
  // images have loaded
});

jQuery 递延

JQuery 插件返回一个jQuery 推迟对象。这允许您使用.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 );
 });

与 RequireJS 使用

imagesLoaded 与 RequireJS 的工作.

您可以要求 imagesloaded.pkgd.js.

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

或者您可以管理 bower 的依赖项。设置为 bower_components 的 baseUrl 和设置路径配置为您的所有应用程序代码。

requirejs.config({
  baseUrl: 'bower_components/',
  paths: {
    // path to your app
    app: '../'
  }
});
requirejs( [
 'imagesloaded/imagesloaded',
 'app/my-component.js'
 ], function( imagesLoaded, myComp ) {
 imagesLoaded( '#container', function() { ... });
});

如何获取

官方网站  |  下载地址  |  在线demo