图片加载插件imagesLoaded的配置和使用
imagesLoaded是一个能够监测图片的加载状态图片加载js插件。如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施，这款插
imagesLoaded是一个能够监测图片的加载状态图片加载js插件。
如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施，这款插件会很有用处。
需要注意的是，如果有新添加的元素，要在元素添加完后重新设置插件，否则不会监测新元素。
官网：https://imagesloaded.desandro.com/
CDN
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/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有两个接口：
- LoadingImage.img返回加载img图片的元素；
- LoadingImage.isLoaded返回图片是否被成功加载。
imagesLoaded有一个接口
- imagesLoaded.images返回LoadingImage的数组
