简介

imagesLoaded 是一个检查图片是否加载完成的 JS 插件，插件是在图片加载成功后才做一系列操作,检测图像是否已经加载，在图片加载成功后才做一系列操作。

使用

1.  引入imagesloaded.pkgd.js文件

2.  调用

imagesLoaded( elem, callback )
// you can use `new` if you likenew imagesLoaded( elem, callback )

elem 元素、 节点列表、 数组或选择器字符串
callback 函数-函数触发后已加载的所有图像

imagesLoaded 是事件发送者。您可以将事件侦听器绑定到事件

var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log('all images are loaded');}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );

方法

A.  always

imgLoad.on( 'always', function( instance ) { console.log('ALWAYS - all images have been loaded'); });

触发后的所有图像都已加载或证实破碎。instanceimagesLoaded -imagesLoaded 实例。

B.  done

imgLoad.on( 'done', function( instance ) {  console.log('DONE  - all images have been successfully loaded');});

触发后所有已成功加载映像没有任何损坏的图像。

C.  fail

imgLoad.on( 'fail', function( instance ) {  console.log('FAIL - all images loaded, at least one is broken');});

触发后的所有图像都已都加载与至少一个断开的图像。

D.  fail 

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';  console.log( 'image is ' + result + ' for ' + image.img.src );
});

已加载的每个图像后触发。

 3.  与 jQuery 一起使用

如果您包括 jQuery，imagesLoaded 可以用作一个 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 ); });

4.  与 RequireJS 一起使用

requirejs([  'path/to/imagesloaded.pkgd.js',  ], function( imagesLoaded ) {
  imagesLoaded( '#container', function() { ... });});

相关链接

官网 ：https://imagesloaded.desandro.com/