通例，起首贴上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图，加载失利时放个毛病提醒什么的都很轻易呢。