图片/图形
imagesLoaded - 检测图片是否正确加载js插件
PetitQ
magesLoaded 是一款用于检测页面中的图片是否被加载的 js 插件。imagesLoaded 是非常有用的插件，当你的页面中某幅图片没有被加载时，默认会显示一个红叉或图片 alt 文本，imagesLoaded 可以将未加载的图片替换为你设置的图片。
<script src="/path/to/isotope.pkgd.min.js"></script>
也想出现在这里？联系我们吧
使用方法
imagesLoaded( elem, callback )
// you can use `new` if you likenew imagesLoaded( elem, callback )
elem：该参数是元素，节点列表，数组或选择器字符串
callback：图片被加载后的回调事件
使用 callback 回调函数和绑定 always 事件是一样的（看事件描述一节内容）。
// 作为元素imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// 作为选择器字符串imagesLoaded( '#container', function() {...});
// 多个元素var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
事件
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 );
always
imgLoad.on( 'always', function( instance ) {
console.log('ALWAYS - all images have been loaded');
});
在所有图片被加载或确认 broken 时触发。instance：imagesLoaded 实例对象。
done
imgLoad.on( 'done', function( instance ) {
console.log('DONE - all images have been successfully loaded');
});
在所有图片被成功加载没有 broken 图片的时候触发。
fail
imgLoad.on( 'fail', function( instance ) {
console.log('FAIL - all images loaded, at least one is broken');
});
在所有图片被加载至少有一幅图片是 broken 图片的时候触发。
progress
imgLoad.on( 'progress', function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
在每一幅图片都被加载之后触发
instance：imagesLoaded 实例对象
image：加载图片时的 loading 对象的实例对象
要检测的所有图片的 LoadingImage 实例对象。
var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
console.log( imgLoad.images.length + ' images loaded' );
// detect which image is brokenfor ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
var image = imgLoad.images[i];
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
}});
与 jQuery 结合使用
如果你在页面中引入的 jQuery，imagesLoaded 可以作为一个 jQuery 插件来使用。
$('#container').imagesLoaded( function() {
// images have loaded});
jQuery Deferred
作为 jQuery 插件来使用时会返回一个 jQuery Deferred object。你可以和前面使用事件的方法一样使用.always()、.done()、.fail()和.progress()。
$('#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 );
});
RequireJS
imagesLoaded 可以和 RequireJS 一起工作。你可以 require imagesloaded.pkgd.js。
requirejs( [
'path/to/imagesloaded.pkgd.js',
], function( imagesLoaded ) {
imagesLoaded( '#container', function() { ... });
});
或者可以通过 Bower 来管理依赖。将 baseUrl 设置为 bower_components，然后将路径设置为你的 app 工作路径。
requirejs.config({
baseUrl: 'bower_components/',
paths: { // path to your app
app: '../'
}});
requirejs( [
'imagesloaded/imagesloaded',
'app/my-component.js'], function( imagesLoaded, myComp ) {
imagesLoaded( '#container', function() { ... });
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
