jQuery imagesLoaded

🌙

手机阅读

本文目录结构

插件 jQuery.imagesloaded 中文 API 文档

imagesLoaded

检测何时加载图像。

安装

下载

imagesloaded.pkgd.min.js minified
imagesloaded.pkgd.js un-minified

CDN

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

包

Install via : npm install imagesloaded

Install via : bower install imagesloaded --save

jQuery

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

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

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

.imagesLoaded() 返回 jQuery Deferred object. 这允许您使用 .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 );
  });

Vanilla JavaScript

You can use imagesLoaded with vanilla JS.

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

elem 元素，NodeList，数组或选择器字符串
options Object
callback Function - 加载所有图像后触发的功能

使用回调函数与将其绑定到 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() {...});

使用 .on(), .off(), and .once() 方法将事件与 Vanilla JS 绑定。

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

CodePen 上的 jQuery demo or vanilla JS demo .

设置为选择器字符串，例如 { 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 demo 和 vanilla JS demo.

大事记

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

图片 - img 元素

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

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 加载的图像。

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

Run 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 License

imagesLoaded is released under the MIT License. Have at it.

Github

https://github.com/desandro/imagesloaded