README

已废弃！请参阅 heimrichhannot-contao-components/imagesloaded。

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

imagesloaded.desandro.com

检测图片何时加载完成。

安装

下载

• imagesloaded.pkgd.min.js （压缩版）
• imagesloaded.pkgd.js （未压缩版）

CDN

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

包管理器

通过 npm 安装：npm install imagesloaded

通过 Bower 安装：bower install imagesloaded --save

jQuery

您可以将 imagesLoaded 作为 jQuery 插件使用。

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

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

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

您可以使用纯 JavaScript 来使用 imagesLoaded。

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() {...});

使用纯 JavaScript 的 .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 );

背景

除了 `` 标签外，检测背景图片何时加载完成。

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

在 CodePen 上查看 jQuery 示例 或 纯 JavaScript 示例。

设置为选择器字符串，如 { 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');
});

在 CodePen 上查看 jQuery 示例 或 纯 JavaScript 示例。

事件

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 - img 元素

LoadingImage.isLoaded

布尔值 - 当图片成功加载时为 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 );
  }
});

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() {...});

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

RequireJS

imagesLoaded 与 RequireJS 兼容。

你可以引入 imagesloaded.pkgd.js。

requirejs( [
  'path/to/imagesloaded.pkgd.js',
], function( imagesLoaded ) {
  imagesLoaded( '#container', function() { ... });
});

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

requirejs( [
  'jquery',
  'path/to/imagesloaded.pkgd.js',
], function( $, imagesLoaded ) {
  // provide jQuery argument
  imagesLoaded.makeJQueryPlugin( $ );
  // now use .imagesLoaded() jQuery plugin
  $('#container').imagesLoaded( function() {...});
});

你可以使用 Bower 来管理依赖。将 baseUrl 设置为 bower_components，并为所有应用代码设置路径配置。

requirejs.config({
  baseUrl: 'bower_components/',
  paths: { // path to your app
    app: '../'
  }
});

requirejs( [
  'imagesloaded/imagesloaded',
  'app/my-component.js'
], function( imagesLoaded, myComp ) {
  imagesLoaded( '#container', function() { ... });
});

浏览器支持

• IE9+
• Android 2.3+
• iOS Safari 4+
• 所有其他现代浏览器

使用 imagesLoaded v3 来支持 IE8。

MIT 许可证

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