前端图片加载扩展 imagesLoaded

imagesLoaded是一个图片加载插件,能够监测图片的加载状态，Github 5k+ stars表明了这款插件的实用性。

JavaScript is all like "You images done yet or what?"

如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施，这款插件会很有用处。
需要注意的是，如果有新添加的元素，要在元素添加完后重新设置插件，否则不会监测新元素。

安装方式

npm

npm install imagesloaded

cdn

<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的数组

前端 js imagesLoaded