imagesLoaded是一个图片加载插件,可以监测图片的加载状况，Github 5k+ stars表清楚明了这款插件的实用性。

JavaScript is all like “You images done yet or what?”

假如你愿望在图片加载完成后做些什么。或在图片加载失利后能有补救措施，这款插件会很有用途。
须要注重的是，假如有新增加的元素，要在元素增加完后从新设置插件，不然不会监测新元素。

装置体式格局

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

载入

<script src= "https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>

设置体式格局

// jQuery设置体式格局
$('#container').imagesLoaded( function() {
  // 图片加载后实行的要领
});

$('#container').imagesLoaded( {
     // 属性设置
  },
  function() {
     // 图片加载后实行的要领
  }
);

// javaScript设置体式格局
var imgLoad = imagesLoaded( '#container', function() {
    // 图片加载后实行的要领
});

悉数事宜

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('图片已悉数加载，或被确认加载失利');
  })
  .done( function( instance ) {
    console.log('图片悉数加载胜利');
  })
  .fail( function( instance ) {
    console.log('图片已悉数加载，且最少一个图片加载失利');
  })
  .progress( function( instance, image ) {
    console.log('每张图片加载完');
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( '加载效果 ' + result + ' 图片地点 ' + image.img.src );
  });

// javaScript体式格局
imgLoad.on( 'always', onAlways );

悉数设置

// background 检测背景图片的加载状况
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// 指定要检测背景图片的子元素
$('#container').imagesLoaded( { background: '.item' }, function() {
  console.log('all .item background images loaded');
});

// JavaScript体式格局
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

参数

参看事宜一栏，instance是imagesLoaded的实例
image是LoadingImage的实例

LoadingImage有两个接口：

1. LoadingImage.img返回加载img图片的元素；

2. LoadingImage.isLoaded返回图片是不是被胜利加载。

imagesLoaded有一个接口

1. imagesLoaded.images返回LoadingImage的数组