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

惯例,首先贴上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图,加载失败时放个错误提示什么的都很方便呢。


实用至上
记录和分享我在开发过程中的心得与感悟
10.4k 声望
6.6k 粉丝
0 条评论
推荐阅读
React 源码解析系列 - React 的 render 异常处理机制
系列文章目录(同步更新)React 源码解析系列 - React 的 render 阶段(一):基本流程介绍React 源码解析系列 - React 的 render 阶段(二):beginWorkReact 源码解析系列 - React 的 render 阶段(三):compl...

array_huang13阅读 3.7k评论 1

封面图
手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.6k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.4k评论 6

10.4k 声望
6.6k 粉丝
宣传栏