推荐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图，加载失败时放个错误提示什么的都很方便呢。