imagesLoaded插件

最新推荐文章于 2024-08-15 09:28:01 发布

原创最新推荐文章于 2024-08-15 09:28:01 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

103 篇文章

订阅专栏

本文介绍了imagesLoaded插件的功能及使用方法，此插件可在所有图片加载完成后触发回调函数，适用于直接加载图片或内嵌图片的情况。文章还提供了具体的使用示例。

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可以是一个函数也可以是一个map

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