这两个有什么区别
// 图片加载完成后淡入$img.on('load', function () {$img.css('opacity', '1');});// 处理图片缓存情况if ($img[0].complete) {$img.css('opacity', '1');}要理解这两段代码的区别，需要先明确它们的核心作用场景和执行时机差异—— 本质是解决 “图片加载完成后显示” 的问题，但分别覆盖了 “图片未缓存” 和 “图片已缓存” 两种不同状态，避免显示异常。以下从多个维度详细对比：
1. 核心功能与作用场景
两段代码的最终效果一致（都将图片的 opacity 设为 1，实现 “淡入显示”），但针对的图片加载状态完全不同：
| 代码片段 | 核心作用 | 针对的场景 |
|---|---|---|
$img.on('load', function () { ... }) | 监听图片 “加载完成” 事件，事件触发时执行显示逻辑 | 图片未被浏览器缓存（首次加载）：此时图片需要从服务器下载，加载有延迟，必须等下载 + 渲染完成后再显示 |
if ($img[0].complete) { ... } | 主动检查图片当前是否已加载完成，若已完成则立即执行显示逻辑 | 图片已被浏览器缓存：缓存的图片会直接从本地读取，加载速度极快，“load” 事件可能在代码绑定前就已触发，导致事件监听失效，需主动判断 |
2. 执行时机差异（关键区别）
这是两段代码最核心的不同，根源在于 “缓存图片的 load 事件触发时机”：
（1）load 事件监听：“被动等待”
- 代码逻辑：给图片元素绑定一个
load事件处理器，只有当图片真正完成加载（下载 + 渲染）时，浏览器才会触发这个事件，进而执行opacity: 1。 - 适用场景：未缓存的图片（首次加载）。因为未缓存的图片加载需要时间，代码绑定事件时，图片还在加载中，后续加载完成后会正常触发
load事件。 - 问题：如果图片已缓存（本地直接读取），加载会在瞬间完成 —— 可能在代码绑定
load事件之前就已经加载完成，此时load事件永远不会触发，图片会一直处于透明状态（opacity: 0）。
（2）complete 属性检查：“主动兜底”
- 代码逻辑：
$img[0]是从 jQuery 对象（$img）中获取的原生 DOM 元素，原生图片 DOM 有一个complete属性：- 若图片已完全加载（无论是否缓存），
complete为true； - 若图片正在加载或加载失败，
complete为false。
- 若图片已完全加载（无论是否缓存），
- 作用：专门解决 “缓存图片
load事件不触发” 的问题 —— 代码执行时，主动检查图片是否已加载完成，若已完成（complete: true），则直接设置opacity: 1，无需等待load事件。 - 本质：是对
load事件的 “兜底逻辑”，确保两种加载状态（缓存 / 未缓存）下图片都能正常显示。
3. 总结：为何需要同时写两段代码？
单独使用任何一段都会有问题：
- 只写
load事件：缓存图片因load事件未触发，会一直透明； - 只写
complete检查：未缓存图片因加载未完成（complete: false），会一直透明，直到加载完成后也不会再显示。
两段代码结合后，形成 “全覆盖逻辑”：
- 对于未缓存图片：
complete为false，不执行即时显示；后续加载完成后，load事件触发，执行显示； - 对于已缓存图片：
complete为true，立即执行显示；无需依赖load事件。
最终实现 “无论图片是否缓存，加载完成后都能正常淡入显示” 的效果。
