图片加载插件imagesLoaded的配置和使用

notebin

imagesLoaded是一个图片加载插件,能够监测图片的加载状态,Github 5k+ stars表明了这款插件的实用性。

JavaScript is all like "You images done yet or what?"

如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施,这款插件会很有用处。
需要注意的是,如果有新添加的元素,要在元素添加完后重新设置插件,否则不会监测新元素。

安装方式

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

载入

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

配置方式

// jQuery配置方式
$('#container').imagesLoaded( function() {
  // 图片加载后执行的方法
});

$('#container').imagesLoaded( {
     // 属性配置
  },
  function() {
     // 图片加载后执行的方法
  }
);

// javaScript配置方式
var imgLoad = imagesLoaded( '#container', function() {
    // 图片加载后执行的方法
});

全部事件

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('图片已全部加载,或被确认加载失败');
  })
  .done( function( instance ) {
    console.log('图片全部加载成功');
  })
  .fail( function( instance ) {
    console.log('图片已全部加载,且至少一个图片加载失败');
  })
  .progress( function( instance, image ) {
    console.log('每张图片加载完');
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( '加载结果 ' + result + ' 图片地址 ' + image.img.src );
  });

// javaScript方式
imgLoad.on( 'always', onAlways );

全部配置

// background 检测背景图片的加载情况
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// 指定要检测背景图片的子元素
$('#container').imagesLoaded( { background: '.item' }, function() {
  console.log('all .item background images loaded');
});

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

参数

参看事件一栏,instance是imagesLoaded的实例
image是LoadingImage的实例

LoadingImage有两个接口:

  1. LoadingImage.img返回加载img图片的元素;

  2. LoadingImage.isLoaded返回图片是否被成功加载。

imagesLoaded有一个接口

  1. imagesLoaded.images返回LoadingImage的数组

阅读 11.6k

React小黄书
notebin同学的充满现实理想主义气息的一本前端学习笔记

想写些不一样的东西

3k 声望
44 粉丝
0 条评论
你知道吗?

想写些不一样的东西

3k 声望
44 粉丝
宣传栏