imagesLoaded.js 图片加载完成后执行的插件

imagesLoaded 是一款元素内图片加载成功后才执行相关代码的插件，用于需要加载完元素范围内素有图片再执行相关代码的场景。

官网

https://imagesloaded.desandro.com/

用法

<div id="container">
  <img src="imgUrl" alt="">
  <img src="imgUrl" alt="">
</div>

<script type="text/javascript">
// 使用方法
var imgLoad = imagesLoaded('#container',function(){
  console.log('#container background image loaded');
});
//事件回调//
//触发后所有图像都已加载或证实破碎
imgLoad.on( 'always', function( instance) {
  console.log('all images loaded,always');
});
//触发后所有已成功加载映像没有任何损坏的图像
imgLoad.on( 'done', function( instance) {
  console.log('all images successfully loaded,done');
});
//触发后的所有图像都已都加载与至少一个断开的图像。
imgLoad.on( 'fail', function( instance) {
  console.log('all images loaded, at least one is broken,fail')
});
//加载的每个图像以后触发。
imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});
// 加入 background: true;监听背景图//
$('#container').imagesLoaded({ background: true }).done( function(instance ) {
  console.log('DONE  - all images have been successfully loaded');
});
// jQuery 递延写法//
$('#container').imagesLoaded()
 .always( function( instance ) {
 console.log('all images loaded');
 })
 .done( function( instance ) {
 console.log('all images successfully loaded');
 })
 .fail( function() {
 console.log('all images loaded, at least one is broken');
 })
 .progress( function( instance, image ) {
 var result = image.isLoaded ? 'loaded' : 'broken';
 console.log( 'image is ' + result + ' for ' + image.img.src );
 });
</script>

CDN

<script type="text/javascript" src="https://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>