imagesLoaded插件是一个在图片加载成功后才做一系列操作
官方网站:https://github.com/desandro/imagesloaded/
使用语法:
$(selector).imagesLoaded( [ callback ] );
ImagesLoaded可以呼吁一个元素中的图像,图像直接,或两者的结合。
selector选择器支持:
1.直接为图片
2.内嵌图片
3.两者综合使用
官方例子:
// Calling on an element that may contain images $('#content').imagesLoaded(fn); // Calling on image elements directly $('img').imagesLoaded(fn); // Combination of both $('#content, #gallery > img').imagesLoaded(fn);
callback为一个函数
该函数接受3个参数
- $images:
Object
jQuery object with all images 所有的图片 - $proper:
Object
jQuery object with properly loaded images 加载成功的图片 - $broken:
Object
jQuery object with broken images 加载失败的图片
官方例子:
$('#my-container, .article img').imagesLoaded( function( $images, $proper, $broken ) { console.log( $images.length + ' images total have been loaded' ); console.log( $proper.length + ' properly loaded images' ); console.log( $broken.length + ' broken images' ); });