imagesLoaded 图片加载完成后执行的 JavaScript 插件

发布于 2018-08-07 字数4976 浏览 930 评论 0

imagesLoaded 是一个检查图片是否加载完成的 JavaScript 插件,在 Masonry 中就使用了这一个插件,避免在运行代码的时候无法获取图片的高度和宽度。

安装插件

您可以下载源文件引入您的项目中

或通过 Bower 安装: bower install imagesloaded

或通过 npm 安装: npm install imagesloaded

使用方法

imagesLoaded( elem, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )
  • elem 元素、 节点列表、 数组或选择器字符串
  • 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() {...});

事件方法

imagesLoaded 是事件发送者。您可以将事件侦听器绑定到事件。

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

1、always

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

触发后的所有图像都已加载或证实破碎。

  • instanceimagesLoaded -imagesLoaded 实例

2、done

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

触发后所有已成功加载映像没有任何损坏的图像。

3、fail

 imgLoad.on( 'fail', function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

触发后的所有图像都已都加载与至少一个断开的图像。

4、progress

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

已加载的每个图像后触发。

  • instanceimagesLoaded -imagesLoaded 实例
  • imageLoadingImage -LoadingImage 实例与加载的图像

变量属性

  • LoadingImage.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 );
  }
});

与 jQuery 使用

如果您包括 jQuery,imagesLoaded 可以用作一个 jQuery 插件。

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

jQuery 递延

JQuery 插件返回一个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 );
 });

与 RequireJS 使用

imagesLoaded 与 RequireJS 的工作.

您可以要求 imagesloaded.pkgd.js.

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

或者您可以管理 bower 的依赖项。设置为 bower_components 的 baseUrl 和设置路径配置为您的所有应用程序代码。

requirejs.config({
  baseUrl: 'bower_components/',
  paths: {
    // path to your app
    app: '../'
  }
});
requirejs( [
 'imagesloaded/imagesloaded',
 'app/my-component.js'
 ], function( imagesLoaded, myComp ) {
 imagesLoaded( '#container', function() { ... });
});

如何获取

官方网站  |  下载地址  |  在线demo

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!