推荐JS插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)

array_huang

惯例,首先贴上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除了能监测<img>外,还能监测用css定义的background-image,具体见:http://imagesloaded.desandro.com/#background

除了瀑布流需要用到imagesLoaded,我最近还发现在利用html5 file api读取本地图片的时候也需要用到imagesLoaded,道理同瀑布流。另外,在做一些图片加载效果的时候也可以用到,比如说图片未加载完成之前放个loading图,加载失败时放个错误提示什么的都很方便呢。

阅读 4.2k

实用至上
记录和分享我在开发过程中的心得与感悟
10.4k 声望
6.6k 粉丝
0 条评论
10.4k 声望
6.6k 粉丝
文章目录
宣传栏