企业官网建设流程全解析

• 前端

waitForImages 是一个轻量级 jQuery 插件，核心能力是为图片加载事件（每张图加载完成、全部图片加载完成）挂载回调。但很少有人知道：它还会悄悄注册 2 个 jQuery 自定义选择器——:has-src与:uncached，帮你精准定位"有真实 src 的图片"和"未被浏览器缓存的图片"。这两个隐藏武器能让你的图片加载流程更快、更稳。🎯

一、先认识主角：waitForImages 插件在做什么

waitForImages()方法会扫描元素内所有<img>（可选扫描 CSS 背景图等），为每张图监听load与error事件，并通过回调或 Promise 通知你：

• 单张完成：each回调，返回已加载数 / 总数 / 是否成功
• 全部完成：finished回调或.done()

官方示例见 README.md 的 Usage 部分。

但常规用法只关心"等图片加载完"。实际开发中你还会遇到这些问题：

:has-src和:uncached正是为这两个问题而生的。⚡

二、隐藏武器一：:has-src —— 只选中"真正有 src"的 img

has-src是一个 jQuery 伪类选择器，只匹配带有有效src属性的<img>元素——即src存在且不为空字符串。

它注册在$.expr.pseudos上，定义非常简洁，就一行：

$.expr.pseudos['has-src'] = function (obj) { // 确保是一个带有有效 src 属性的 img 元素 return $(obj).is('img[src][src!=""]'); };

源码位置：src/jquery.waitforimages.js

它不只是装饰——插件内部扫描图片时就在用它：

• 默认模式：obj.find('img:has-src')只收集有效图片（第 162 行）
• waitForAll: true模式：element.is('img:has-src')判断是否计入 img 图片列表（第 118 行）

实用场景：加载前清理空 src 的废图

// 删除所有没有有效 src 的 img，避免干扰加载统计 $('img').not(':has-src').remove();

三、隐藏武器二：:uncached —— 精准定位"未缓存图片"

:uncached判断逻辑分两步（源码第 42-50 行）：

1. 先必须是:has-src（有有效 src 的<img>）
2. 且img.complete为false——即浏览器尚未完成该图的加载（含缓存读取）

$.expr.pseudos.uncached = function (obj) { if (!$(obj).is(':has-src')) { return false; } return !obj.complete; };

为什么这很关键？浏览器对缓存图片会瞬间将其标记为complete。如果无脑给所有图加"加载中"样式，缓存图会经历一次无意义的闪烁。用:uncached就能只给真正需要等待的图片加状态：

// 只给未缓存（尚未加载完成）的图片加"加载中"提示 $('img:uncached').attr('title', 'Loading Image');

官方在 README.md 第 129-134 行给出了同样用法示例。

四、组合实战：打造无闪烁的图片加载工作流 💡

把两个选择器和waitForImages()搭配起来，可以覆盖完整生命周期：

// 1️⃣ 清理无效图片 $('img').not(':has-src').remove(); // 2️⃣ 给"未缓存"图片挂上加载态（缓存图秒出，不闪） $('gallery img:uncached').addClass('is-loading'); // 3️⃣ 等待全部加载完成，统一收尾 $('#gallery').waitForImages(function () { // this 指向 #gallery 元素集合 $('#gallery img').removeClass('is-loading'); $('#gallery').addClass('images-ready'); }, function (loaded, total, success) { console.log(loaded + ' / ' + total + ' 张图片已处理'); });

三步走，逻辑闭环：清理 → 标记 → 等待 → 收尾。

五、一图看懂：两个选择器的区别

两者都依赖img标签使用（即$('img:uncached')），与插件本体一样，需在 jQuery 之后引入方可全局生效。

六、关键文件与验证入口

⚠️注意：插件要求 jQuery 1.8 及以上版本，且必须加载在 jQuery 之后（参见 README.md）。

七、常见问题 FAQ

Q1：页面刚加载完就执行$('img:uncached')，结果有时是空的？正常现象。complete是瞬时状态——图片一旦加载（或从缓存读取）完成就变为true。所以:uncached适合在图片刚插入 DOM 时立即调用，用来区分"秒出的缓存图"和"需要等待的网络图"。

Q2：:has-src能选到背景图吗？不能。它只针对<img>元素。背景图、srcset等 CSS/属性图片由waitForImages()的waitForAll: true模式负责收集，插件默认检查backgroundImage、listStyleImage、borderImage、borderCornerImage、cursor等属性（第 22-31 行）。

Q3：选择器必须在调用waitForImages()之后才可用吗？不需要。它们通过$.expr.pseudos注册到全局 jQuery，只要插件脚本已加载，$('img:has-src')、$('img:uncached')随时可用，与是否调用过waitForImages()无关。

写在最后

waitForImages的价值不止是"等图片加载完"。:has-src帮你过滤噪音，:uncached帮你识别真实等待，两者配合waitForImages()的回调机制，就能构建出无闪烁、无死角的图片加载体验。下次处理画廊、文章排版或首屏优化时，不妨先试试这两个隐藏武器。

• 前端