元素的 load 事件
" />
的 load 事件易因图片加载时机早于事件绑定而失效；需在绑定前检查 complete 属性，或确保脚本在 DOM 尾部执行，才能可靠触发。
`` 的 `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，极可能已 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($('#avatar'),
$el => console.log('Avatar ready!'),
$el => console.error('Avatar failed to load')
);
? 补充说明：为何 $(window).on('load') 总是有效？
window.load 事件会等待所有资源（含图片、样式表、脚本）加载完毕才触发，因此它天然规避了单个图片提前加载的问题。但它延迟高、粒度粗，不适合精细化控制某张图片的状态。
综上，可靠监听图片加载的核心原则是：永远先检查 complete，再决定是否监听 load——这是跨浏览器、兼容缓存与网络延迟的健壮实践。
