推薦JS插件：imagesLoaded，監測圖片加載狀況並提供相應的事件（加載成功/失敗）

慣例，首先貼上imagesLoaded的官方網址：http://imagesloaded.desandro.com/

第一次知道imagesLoaded這個插件是在作瀑布流佈局時，當時選用的是masonry這個老牌瀑布流插件，imagesLoaded這個插件也是masonry官方推薦的，多是同一夥人吧。具體場景是這樣的，咱們的圖片寬度都是固定的，但高度不固定（瀑布流都是這樣的吧），但masonry在進行排列前就必須肯定圖片的高度，而圖片在還沒有加載完成前是沒法得知高度的（其實也不是絕對，我那時後期就改爲在上傳圖片的時候就記錄好圖片的高度）。爲了保證masonry在拿到圖片高度，也即圖片加載完成後再進行排列，我根據masonry的推薦，選用了這一款imagesLoaded插件。

imagesLoaded能夠搭配jquery使用，也能夠用原生js來調用，這裏方便起見（也比較直觀）就直接上jquery版的：

$('#container').imagesLoaded()
.always( function( instance ) {    //always事件，在全部圖片都加載完成（成功與否不論）時觸發
  console.log('all images loaded');
})
.done( function( instance ) {    //done事件，在全部圖片都加載成功時觸發
  console.log('all images successfully loaded');
})
.fail( function() {    //fail事件，在全部圖片都加載完成，而且至少有一張圖片加載失敗時觸發
  console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {    //progress事件，在每一張圖片加載完成時都觸發一次
  var result = image.isLoaded ? 'loaded' : 'broken';    //判斷當前圖片加載成功與否
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

imagesLoaded除了能監測<img>外，還能監測用css定義的background-image，具體見：http://imagesloaded.desandro.com/#background

除了瀑布流須要用到imagesLoaded，我最近還發如今利用html5 file api讀取本地圖片的時候也須要用到imagesLoaded，道理同瀑布流。另外，在作一些圖片加載效果的時候也能夠用到，好比說圖片未加載完成以前放個loading圖，加載失敗時放個錯誤提示什麼的都很方便呢。