在图片加载过程中，`img` 元素的 load 事件常常因为图片比事件绑定更早完成而失效。核心解决思路是：在绑定事件之前先检查 `complete` 属性，或者确保脚本在 DOM 末尾执行，这样才能可靠地触发事件。
说实话，在 jQuery 中给 `` 元素绑定 load 事件看似简单，但实际踩坑的人非常多。尤其是当脚本放在 `
✅ 正确做法：兼顾 complete 与 load 事件判断
因此，一个靠谱的写法必须包含对 `img.complete` 属性的判断。这个属性是原生 DOM 的标准属性，返回布尔值，可用于判断图片是否已经加载完成。代码可以这样写：
const $img = $('img#myImage');if ($img[0]?.complete) { // 图片已经加载完毕，直接执行逻辑 console.log('Image loaded synchronously:', $img[0]); handleImageLoaded($img);} else { // 图片尚未加载，绑定 load 事件等待完成 $img.on('load', function() { console.log('Image loaded via event:', this); handleImageLoaded($(this)); }).on('error', function() { console.warn('Failed to load image:', this.src); });}
请注意：`$img[0]` 获取的是原生 `
` 元素，`complete` 是其标准属性（MDN 有详细说明）。不建议使用 jQuery 的 `.prop('complete')` 方法替代，因为部分旧版本 jQuery 对该属性的支持不一致，可能引发问题。
⚠️ 常见误区：你是否也踩过这些坑？
- ❌ 不要仅依赖 $(document).ready()：它只保证 DOM 解析完成，并不保证图片已经加载。如果图片来自缓存或使用内联 data: URL，很可能在 ready 执行前就已经 complete 了。
- ❌ 不要使用全局 $('img').on('load', ...)：对已经 complete 的图片没有效果，也无法捕获后续动态插入的图片，容易遗漏。
- ✅ 推荐的做法：
- 对于静态图片：在插入 DOM 后，立即检查 complete 并绑定 load 事件。
- 对于动态插入的图片（如 AJAX 加载的）：创建 `
` 后，马上检查 complete，再绑定事件。
- 对于批量处理的情况：可以封装成一个可复用的函数，避免重复编写。
这里提供一个封装好的实用函数：
function onImageLoad($img, onLoad, onError = null) { const img = $img[0]; if (!img) return; if (img.complete) { onLoad($img); } else { $img.one('load', () => onLoad($img)) .one('error', () => onError && onError($img)); }}// 使用示例onImageLoad($('#a vatar'), $el => console.log('A vatar ready!'), $el => console.error('A vatar failed to load'));
? 额外补充：为什么 $(window).on('load') 总是有效？
window 的 load 事件会等待页面上所有资源（包括图片、样式表、脚本）都加载完毕后才触发，因此天然避开了单个图片提前加载的问题。但它的缺点是延迟高、粒度粗，不适合精细化控制某张图片的状态，只在需要全页面资源都就绪的场景下才适用。
总结一下，可靠监听图片加载的核心原则其实就一句话：永远先检查 complete，再决定是否监听 load。 这是跨浏览器、兼容缓存与网络延迟的健壮实践，也是真正能避免踩坑的关键所在。
