前端【免费下载链接】waitForImagesA jQuery plugin that lets you attach callbacks to useful image loading events.项目地址https://gitcode.com/gh_mirrors/wa/waitForImages点击查看免费下载waitForImages是一个轻量的 jQuery 插件核心源码只有 226 行却为图片加载完成了完整的监控能力它让开发者在页面上所有图片含background-image背景图、srcset属性图加载完成后执行回调并支持逐张进度通知。本文带你逐段阅读 src/jquery.waitforimages.js看懂它如何用Deferred 对象和事件命名空间这两个机制写出简洁而健壮的图片加载监控系统。一分钟认识 waitForImages解决什么问题网页中的图片是异步加载的。在document ready之后、图片真正加载完成之前浏览器尤其是旧版 WebKit可能还没有算出img的真实尺寸导致提前读取的元素高度、偏移量是错的。waitForImages 的用法非常直观$(selector).waitForImages(function() { // 所有图片加载完成现在再计算尺寸、执行动画都安全了 $(this).slideUp(); });它的两大能力✅完成回调所有图片加载结束后触发成功或失败都算结束✅进度回调每加载完一张图片就通知一次附带已加载数/总数/是否成功更多用法示例可参考 README.md。源码地图226行如何分层打开 src/jquery.waitforimages.js整个文件可以分成 4 个清晰的区域这也是一个优秀小型插件的典型组织结构区域行号职责UMD 模块包装L1-L12让插件同时支持浏览器、AMD、CommonJS 环境配置区L14-L31事件命名空间、srcset能力检测、可监听的 CSS 属性表自定义选择器L34-L50注册:has-src与:uncached两个伪类选择器主插件函数L52-L225收集图片 → 挂监听 → 计数 → 触发回调这种配置与行为分离的写法值得新手借鉴把可变的数据哪些 CSS 属性可能含图提到外部用户就能通过$.waitForImages.hasImageProperties自行扩展而不用改源码。UMD 包装一套代码跑遍三种环境文件开头的 12 行是标准的 UMDUniversal Module Definition工厂模式;(function (factory) { if (typeof define function define.amd) { define([jquery], factory); // RequireJS / AMD } else if (typeof exports object) { module.exports factory(require(jquery)); // Node.js / CommonJS } else { factory(jQuery); // 浏览器全局 } }(function ($) { /* 插件主体 */ }));工厂函数factory接收jQuery作为依赖外部只负责按环境把依赖传进来内部逻辑完全不关心自己运行在哪里。这正是插件在bower install waitForImages或npm install jquery.waitforimages之后都能直接工作的原因见 README.md。DeferredPromise 风格 API 的心脏waitForImages 最值得学习的设计是它用一个$.Deferred对象同时支撑了回调 API和Promise API两套接口。主函数一开头就创建了 DeferredL56var deferred $.Deferred();之后插件在三处与它交互每张图加载完成→deferred.notifyWith(img.element, eachArguments)L201。notify是 Deferred 的进度通知对应 Promise API 里的.progress()方法用来实现逐张完成的进度回调。最后一张完成→deferred.resolveWith(...)L210。resolve表示已解决触发.done()回调。函数返回值→return deferred.promise()L223。注意返回的是promise()而非deferred本身——这是安全的做法外部只能订阅结果无法强行调用resolve/reject破坏插件内部状态。这样用户既可以写传统的waitForImages(fn)也可以写链式的waitForImages().done(fn).progress(fn)而插件内部只需要一套计数逻辑。对比测试用例可以看到这些 API 都有覆盖test/jquery.waitforimages_test.js。事件命名空间jQuery 插件必学的防串扰技巧浏览器原生监听load事件时一个常见的坑是load是通用事件名你无法区分这是 waitForImages 挂的监听器还是别的代码挂的卸载时也可能误删别人的监听器。jQuery 提供了事件命名空间机制waitForImages 用得很标准L14、L186-L190var eventNamespace waitForImages; // ... var events load. eventNamespace error. eventNamespace; $(image).one(events, function me (event) { /* ... */ });load.waitForImages中的.waitForImages就是命名空间。它带来三个好处精准卸载$(this).off(events, me)只移除带该命名空间的监听器不影响其他插件批量清理off(.waitForImages)可一次性移除本插件的所有事件代码可读命名空间让事件属于谁一目了然还有一个细节监听器同时绑定了load和error两个事件。因为图片加载只有两种结局——成功或失败——用同一个回调统一处理再通过event.type load判断成功与否L196把失败也计入总数保证finished回调一定会被触发不会因一张 404 图片而永远卡住。配合.one()只触发一次 手动off()的双重保险L203-L206.one()只会在自己触发的那条事件上自动解除而load和error必然只有一个会触发另一个会残留所以作者显式地把两个都off掉避免监听器泄漏。自定义伪类选择器:has-src 与 :uncached源码还向 jQuery 注册了两个自定义伪类L34-L50img:has-src—— 选中拥有有效非空src的img过滤掉占位符空图img:uncached—— 选中尚未被浏览器缓存的图片利用原生img.complete属性判断实现方式是通过$.expr.pseudos扩展 jQuery 选择器引擎$.expr.pseudos.uncached function (obj) { if (!$(obj).is(:has-src)) { return false; } return !obj.complete; };插件内部靠:has-src收集图片外部用户也能直接复用$(img:uncached)一码两用。图片收集正则 url() 匹配与 srcset 兼容开启waitForAll: true后插件会把集合内所有后代元素都遍历一遍L109-L159收集三类图片img元素的srcCSS 属性里的url()背景图——用正则/url\(\s*([]?)(.*?)\1\s*\)/g从background-image等 5 个属性值中提取L21-L29\1反向引用确保引号配对srcset属性——先通过new Image()探测浏览器是否支持srcsetL16-L19支持的浏览器会复制srcset/sizes到临时Image上L216-L219保证响应式图片同样被监控参数解析同样贴心L72-L97支持选项对象和多参数两种调用签名回调缺省时回退$.noop非函数参数则抛出TypeError快速失败。边界处理空列表与完成判定两个容易忽略的健壮性细节找不到图片allImgsLength 0时立即调用finishedCallback并resolveL176-L179否则没有图片的容器会永远等不到回调完成判定每张图片的回调里先自增allImgsLoaded再比较allImgsLoaded allImgsLength相等才触发完成L198-L212return false则直接终止当前遍历小结这200行教会我们的三件事Deferred 三件套notify/resolve/promise能让同一个功能同时提供回调和 Promise 两种 API且对外只暴露只读的promise()事件命名空间是 jQuery 插件的安全带让事件的注册与卸载互不干扰计数 双事件load/error 空列表短路是异步批量任务中保证回调必达的经典模式想继续深入建议按顺序阅读主源码 src/jquery.waitforimages.js、完整用法 README.md、测试用例 test/jquery.waitforimages_test.js 与构建配置 Gruntfile.js再看 test/waitforimages.html 了解本地运行测试页面的方式。赞分享前端【免费下载链接】waitForImagesA jQuery plugin that lets you attach callbacks to useful image loading events.项目地址https://gitcode.com/gh_mirrors/wa/waitForImages点击查看免费下载相关推荐终极JSON解析器揭秘200行代码实现的极速JSON解析器jsmn完全指南终极JSON解析器揭秘200行代码实现的极速JSON解析器jsmn完全指南 jsmn是一款用C语言编写的极简JSON解析器以其惊人的小巧体积和卓越性能著称。序列化嵌入式jQuery图片加载waitForImages双模式详解Callback回调 vs Promise Promise深度对比jQuery图片加载waitForImages双模式详解Callback回调 vs Promise Promise深度对比 waitForImages 是一款前端dnGrep文件比较功能详解如何快速找出文件差异的终极指南dnGrep文件比较功能详解如何快速找出文件差异的终极指南 dnGrep是一款强大的Windows图形化GREP搜索工具除了强大的文本搜索功能外它还内置了桌面应用全文检索开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考