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

发布于 2018-08-07 22:31:19 字数 4565 浏览 2444 评论 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 技术交流群。

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

4401 文章
128 评论
84972 人气
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。