imagesLoaded插件是一个轻量级的JavaScript插件，可用于检测页面上的所有图片是否已加载完毕。不仅可以检查img标签图片，还可以检查background背景图片， 当图片加载完成后，还可以触发对应的回调函数，从而执行相应的操作。
jQuery 使用
<script>
$('#container').imagesLoaded(function () {
// 图片加载成功
});
// 属性
$('#container').imagesLoaded({
// 属性..
},
function () {
// 图片加载成功
}
);
</script>.imagesLoaded()返回一个jQuery 回调函数。这允许您使用.always()、.done()和。.fail().progress()
<script>
$('#container').imagesLoaded()
.always(function (instance) {
console.log('触发后的所有图像都已加载');
})
.done(function (instance) {
console.log('触发后所有已成功加载没有任何损坏的图像。！');
})
.fail(function () {
console.log('触发后的所有图像都已都加载并且至少一个断开的图像。');
})
.progress(function (instance, image) {
//已加载的每个图像后触发。
var result = image.isLoaded ? 'loaded' : 'broken';
console.log('image is ' + result + ' for ' + image.img.src);
});
</script>JavaScript 使用
<script>
imagesLoaded(elem, callback)
// 属性选项
imagesLoaded(elem, options, callback)
// 或者使用"new"
new imagesLoaded(elem, callback)
//elem 元素、节点列表、数组或选择器字符串
//options 属性选项
//callback 函数- 所有图像加载后触发的函数
</script>使用回调函数与将其绑定到事件相同always
<script>
// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
</script>使用 .on()、.off() 和 .once() 方法将事件与普通 JS 绑定。
<script>
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);
</script>检查 背景图
设置{ background: true }为检测元素的背景图像何时加载。
<script>
// jQuery
$('#container').imagesLoaded({ background: true }, function () {
console.log('#container background image loaded');
});
// JavaScript
imagesLoaded('#container', { background: true }, function () {
console.log('#container background image loaded');
});
</script>
