懒加载推迟非视口图片加载以优化首屏性能，预加载则提前获取用户可能访问的资源以提升后续体验；两者目标不同但可共存，现代推荐用IntersectionObserver实现懒加载，用new Image()触发预加载。
图片懒加载和预加载是前端优化的关键手段：懒加载推迟非视口图片的加载，减少首屏请求；预加载则提前获取用户可能访问的资源（如滑动后下一张、点击前的详情图）。两者目标不同，实现方式也不同，但可以共存。
懒加载：用 IntersectionObserver 监听进入视口
现代推荐方式，比监听 scroll 更高效、更精准，且自动处理滚动、缩放、导航等场景。
- 创建 Observer 实例，配置 rootMargin（如 "0px 0px 200px 0px" 表示元素距离视口底部 200px 时就开始加载）
- 给 img 标签设置 data-src 存真实地址，src 先设为占位图或空字符串
- Observer 回调中，把 data-src 赋值给 src，并调用 unobserve() 避免重复触发
- 兼容性考虑：若需支持 IE，可用 getBoundingClientRect() + scroll 事件降级，但需节流
预加载：用 JavaScript 创建 Image 实例触发下载
预加载不插入 DOM，只让浏览器发起请求并缓存，后续真正使用时直接从内存或磁盘读取。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 创建 new Image()，设置其 src 属性即可触发加载（无需 append 到页面）
- 可监听 onload 和 onerror 处理成功/失败，便于调试或降级
- 适合场景举例：轮播图切换前预加载下一张、列表页进入详情页前预加载大图、用户 hover 某按钮时预加载关联图
- 注意控制数量：避免一次性预加载过多图片，阻塞关键资源；建议配合可见性判断或用户行为信号（如鼠标停留 >300ms）
结合使用：懒加载基础上按需预加载下几张
例如在图片列表中，当前显示第 n 张，可对第 n+1、n+2 张调用预加载，提升滑动体验。
立即学习“Java免费学习笔记（深入）”；
- 在懒加载回调中，拿到当前加载完成的图片索引，计算后续需预加载的索引范围
- 遍历这些索引，对对应图片的 data-src 创建 Image 实例并赋值 src
- 为避免重复预加载，可用 Set 记录已预加载的 URL 或索引
- 如果图片带响应式 srcset，预加载时建议用最常用尺寸的 URL，或根据 window.devicePixelRatio 选择合适版本
补充技巧：利用 loading="lazy" 和
原生属性可简化基础懒加载，但灵活性低；
- img loading="lazy" 是浏览器原生懒加载，无需 JS，但仅支持现代浏览器，且无法自定义触发时机
- 写在 head 中，强制浏览器优先加载该图（常用于首屏核心图）
- 二者与 JS 实现不冲突，可分层使用：preload 关键图，Observer 控制长列表，Image 实例做预测性预加载
