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

版本:

浏览量:1292

最后更新：2021-09-12

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

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

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

如何使用它：

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