圖片加載插件imagesLoaded的配置和使用

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的數組