摘要：为了保证在拿到图片高度，也即图片加载完成后再进行排列，我根据的推荐，选用了这一款插件。另外，在做一些图片加载效果的时候也可以用到，比如说图片未加载完成之前放个图，加载失败时放个错误提示什么的都很方便呢。
惯例，首先贴上imagesLoaded的官方网址：http://imagesloaded.desandro.com/
第一次知道imagesLoaded这个插件是在做瀑布流布局时，当时选用的是masonry这个老牌瀑布流插件，imagesLoaded这个插件也是masonry官方推荐的，可能是同一伙人吧。具体场景是这样的，我们的图片宽度都是固定的，但高度不固定（瀑布流都是这样的吧），但masonry在进行排列前就必须确定图片的高度，而图片在尚未加载完成前是无法得知高度的（其实也不是绝对，我那时后期就改成在上传图片的时候就记录好图片的高度）。为了保证masonry在拿到图片高度，也即图片加载完成后再进行排列，我根据masonry的推荐，选用了这一款imagesLoaded插件。
imagesLoaded可以搭配jquery使用，也可以用原生js来调用，这里方便起见（也比较直观）就直接上jquery版的：
$("#container").imagesLoaded()
.always( function( instance ) { //always事件，在所有图片都加载完成（成功与否不论）时触发
console.log("all images loaded");
})
.done( function( instance ) { //done事件，在所有图片都加载成功时触发
console.log("all images successfully loaded");
})
.fail( function() { //fail事件，在所有图片都加载完成，并且至少有一张图片加载失败时触发
console.log("all images loaded, at least one is broken");
})
.progress( function( instance, image ) { //progress事件，在每一张图片加载完成时都触发一次
var result = image.isLoaded ? "loaded" : "broken"; //判断当前图片加载成功与否
console.log( "image is " + result + " for " + image.img.src );
});
imagesLoaded除了能监测外，还能监测用css定义的background-image，具体见：http://imagesloaded.desandro.com/#background
除了瀑布流需要用到imagesLoaded，我最近还发现在利用html5 file api读取本地图片的时候也需要用到imagesLoaded，道理同瀑布流。另外，在做一些图片加载效果的时候也可以用到，比如说图片未加载完成之前放个loading图，加载失败时放个错误提示什么的都很方便呢。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91565.html
摘要：是一个图片加载插件能够监测图片的加载状态，表明了这款插件的实用性。如果你希望在图片加载完成后做些什么。或在图片加载失败后能有补救措施，这款插件会很有用处。需要注意的是，如果有新添加的元素，要在元素添加完后重新设置插件，否则不会监测新元素。 imagesLoaded是一个图片加载插件,能够监测图片的加载状态，Github 5k+ stars表明了这款插件的实用性。 JavaScript ...
摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。 公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。 研究了一下，...
摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。 公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。 研究了一下，...
摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。 本位为Masonry官方文档翻译，原始链接 安装Install 下载 下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...
摘要：是最流行的瀑布流插件之一，配置简单，功能强大，在上收获了。如果你想使用瀑布流提升网站体验，将是不错的选择。瀑布流，又称瀑布流式布局。需要注意的是，如果你需要加载图片，不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用插件。 Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验，Masonry...
阅读 610·2023-04-26 00:11
阅读 2445·2021-11-04 16:13
阅读 1951·2021-09-09 09:33
阅读 1363·2021-08-20 09:35
阅读 3600·2021-08-09 13:42
阅读 3345·2019-08-30 15:55
阅读 794·2019-08-30 15:55
阅读 2076·2019-08-30 13:55
