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

惯例,首先贴上imagesLoaded的官方网址:http://imagesloaded.desandro.com/

第一次知道imagesLoaded这个插件是在做瀑布流布局时,当时选用的是masonry这个老牌瀑布流插件,imagesLoaded这个插件也是masonry官方推荐的,可能是同一伙人吧。具体场景是这样的,我们的图片宽度都是固定的,但高度不固定(瀑布流都是这样的吧),但masonry在进行排列前就必须确定图片的高度,而图片在尚未加载完成前是无法得知高度的(其实也不是绝对,我那时后期就改成在上传图片的时候就记录好图片的高度)。为了保证masonry在拿到图片高度,也即图片加载完成后再进行排列,我根据masonry的推荐,选用了这一款imagesLoaded插件。

imagesLoaded可以搭配jquery使用,也可以用原生js来调用,这里方便起见(也比较直观)就直接上jquery版的:

    $('#container').imagesLoaded()
    .always( function( instance ) {
       //always事件,在所有图片都加载完成ÿ
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值