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

EasonTyler 发布于2019-08-22 10:42 / 3333人阅读

摘要：是一个图片加载插件能够监测图片的加载状态，表明了这款插件的实用性。如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施，这款插件会很有用处。需要注意的是，如果有新添加的元素，要在元素添加完后重新设置插件，否则不会监测新元素。

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

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

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

安装方式

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

载入

配置方式

// 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有两个接口：

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

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

imagesLoaded有一个接口

imagesLoaded.images返回LoadingImage的数组

私有云云服务器 linux图片的加载 js实现数据的懒加载图片如何使用web登陆和配置防火墙? js视频预加载插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91122.html

推荐JS插件：imagesLoaded，监测图片加载情况并提供相应的事件（加载成功/失败）

摘要：为了保证在拿到图片高度，也即图片加载完成后再进行排列，我根据的推荐，选用了这一款插件。另外，在做一些图片加载效果的时候也可以用到，比如说图片未加载完成之前放个图，加载失败时放个错误提示什么的都很方便呢。惯例，首先贴上imagesLoaded的官方网址：http://imagesloaded.desandro.com/ 第一次知道imagesLoaded这个插件是在做瀑布流布局时，当时...

atinosun 2019-08-22 10:59 评论0 收藏0
瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置简单，功能强大，在上收获了。如果你想使用瀑布流提升网站体验，将是不错的选择。瀑布流，又称瀑布流式布局。需要注意的是，如果你需要加载图片，不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用插件。 Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验，Masonry...

waterc 2019-08-22 10:42 评论0 收藏0
瀑布流插件Masonry中文文档【翻译】

摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。本位为Masonry官方文档翻译，原始链接安装Install 下载下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...

soasme 2019-08-22 15:18 评论0 收藏0
一个简单的滑动动画广告项目

摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。研究了一下，...

luzhuqun 2019-08-22 10:47 评论0 收藏0
一个简单的滑动动画广告项目

摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。研究了一下，...

FrozenMap 2019-08-01 16:03 评论0 收藏0