README

JavaScript就像在问：“你的图片加载完了吗？”

imagesloaded.desandro.com

检测图片是否加载完成。

安装

下载

imagesloaded.pkgd.min.js 压缩版
imagesloaded.pkgd.js 未压缩版

CDN

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>

包管理器

通过npm安装: npm install imagesloaded

通过Yarn安装: yarn add imagesloaded

jQuery

您可以将imagesLoaded用作jQuery插件。

$('#container').imagesLoaded( function() {
  // images have loaded
});

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // images have loaded
  }
);

.imagesLoaded()返回一个jQuery延迟对象。这允许您使用.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 );
  });

原生JavaScript

您可以使用imagesLoaded与原生JS。

imagesLoaded( elem, callback )
// options
imagesLoaded( elem, options, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )

elem 元素，NodeList，数组或选择器字符串
options 对象
callback 函数 - 所有图片加载完成后触发的函数

使用回调函数与绑定到always事件相同（见下文）。

// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

使用原生JS的.on()、.off()和_once()方法绑定事件。

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

背景

除了<img>外，还能检测背景图片是否加载。

将{ background: true }设置为检测元素背景图片是否加载。

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

查看jQuery演示或原生JS演示在CodePen上。

设置为选择器字符串，如{ background: '.item' }，以检测子元素的背景图片是否加载。

// jQuery
$('#container').imagesLoaded( { background: '.item' }, function() {
  console.log('all .item background images loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: '.item' }, function() {
  console.log('all .item background images loaded');
});

查看jQuery演示或原生JS演示在CodePen上。

事件

always

// jQuery
$('#container').imagesLoaded().always( function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

// vanilla JS
imgLoad.on( 'always', function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

在所有图片加载完成或确认损坏后触发。

instance imagesLoaded - imagesLoaded实例

done

// jQuery
$('#container').imagesLoaded().done( function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

// vanilla JS
imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

在所有图片成功加载且没有损坏的图片后触发。

fail

$('#container').imagesLoaded().fail( function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

// vanilla JS
imgLoad.on( 'fail', function( instance ) {
  console.log('FAIL - all images loaded, at least one is 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 - imagesLoaded实例
image LoadingImage - 加载图片的LoadingImage实例

属性

LoadingImage.img

Image - The img element

LoadingImage.isLoaded

Boolean - 当图片成功加载时为true

imagesLoaded.images

包含每个检测到的图片的LoadingImage实例的数组

var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( 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 );
  }
});

Webpack

使用npm安装imagesLoaded。

npm install imagesloaded

然后您可以require('imagesloaded')。

// main.js
var imagesLoaded = require('imagesloaded');

imagesLoaded( '#container', function() {
  // images have loaded
});

使用.makeJQueryPlugin将.imagesLoaded()转换为jQuery插件。

// main.js
var imagesLoaded = require('imagesloaded');
var $ = require('jquery');

// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});

运行webpack。

webpack main.js bundle.js

Browserify

imagesLoaded与Browserify兼容。

npm install imagesloaded --save

var imagesLoaded = require('imagesloaded');

imagesLoaded( elem, function() {...} );

使用.makeJQueryPlugin使用.imagesLoaded() jQuery插件。

var $ = require('jquery');
var imagesLoaded = require('imagesloaded');

// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});

浏览器支持

Chrome 49+
Firefox 41+
Edge 14+
iOS Safari 8+

使用 imagesLoaded v4 以支持 Internet Explorer 和其他旧版浏览器。

开发

开发使用 Node.js v16 和 npm v8

nvm use

MIT 许可证

imagesLoaded 在 MIT 许可证下发布。尽情使用吧。

desandro / imagesloaded

维护者

详细信息