用于检测图像的jQuery插件已加载 - imagesLoaded

用于检测图像的jQuery插件已加载 - imagesLoaded

版本:

浏览量:1164

最后更新:2021-09-12

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

imagesLoaded 是一个有用的 jQuery 和 Vanilla JavaScript 插件,用于检测和检查容器中的图像是否已加载,然后触发事件以进行进一步的操作。

跨平台和移动友好。支持img标签和背景图像。

相关插件:

  • 用于检查内容已加载的 jQuery 插件 - 正在加载

  • 用于使用 Javascript 预加载图像的 jQuery 插件 - imageloader

如何使用它:

1. 从 CDN 加载 imagesLoaded 库。

<!-- jQuery is optional -->
<script src="jquery.min.js"></script>
<!-- Minified Version -->
<script src="https://unpkg.com/imagesloaded@latest/imagesloaded.pkgd.min.js"></script>

2. 检测是否所有图像都已加载到您指定的容器中。

// jQuery
$('.myContainer').imagesLoaded({
  // options here
}, function() {
  // do something after loaded
});
 
// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'), {
  // options here
}, function() {
  // do something after loaded
});
$('#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 + );
  });

3.检测背景图片的加载。

// jQuery
$('.myContainer').imagesLoaded({
  background: true
}, function() {
  // do something after loaded
});
 
// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'), {
  background: true
}, function() {
  // do something after loaded
});

4. 事件处理程序。

// jQuery
$('.myContainer').imagesLoaded()
.always( function( instance ) {
  // fired after all images are loaded
})
.done( function( instance ) {
  // fired after all images are successfully loaded
})
.fail( function() {
  // fired after all images are 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 );
});
 
// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'))
on('always', function( instance ) {
  // fired after all images are loaded
})
on('done', function( instance ) {
  // fired after all images are successfully loaded
})
on('fail', function( instance ) {
  // fired after all images are loaded, at least one is broken
})
on('progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

变更日志:

v4.1.4 (2019-07-05)

  • 版本更新日期

  • 文档更新

v4.1.1 (2016-08-28)

  • 版本更新

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。