JS检查图片是否加载完成插件imagesloaded.pkgd.js

来源：易助科技网浏览量：48收藏

简介

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 );

3。方法

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() { ... });});