动态背景图片须按使用方式分类存放：img/bg-static/（css背景）、img/bg-gif/（独立gif）、img/bg-seq/（序列帧）、img/bg-thumb/（缩略图）；需手动控制加载时机，禁用loading="lazy"；移动端慎用background-size: cover；canvas贴图必转webp并设降级策略。
动态背景图片资源必须按使用方式分类存放
直接把所有 GIF、PNG、序列帧丢进 img/ 根目录，后期维护会疯。不同动态背景的加载逻辑和生命周期完全不同：CSS 背景图是声明式加载，background-image 一写就触发；Canvas 粒子系统要预加载纹理或帧数据；而点击切换类背景（比如轮播）需要 JS 动态读取 src 并校验路径有效性。不分类，就会出现 index2.html 里引用的 2.gif 被 index3.html 的 JS 误删，或者热更新时覆盖了不该动的序列帧。
推荐结构：
-
img/bg-static/：纯 CSS 背景图，如夜幕底图bg6-1.jpg，只被background-image: url(...)引用 -
img/bg-gif/：独立 GIF 动画，如流星效果star-trail.gif，确保单文件能自循环、无透明抖动 -
img/bg-seq/：Canvas 或 JS 控制的 PNG 序列帧，命名带序号（rain-001.png～rain-048.png），避免用中文或空格 -
img/bg-thumb/：供点击切换用的缩略图，尺寸统一为 120×90，命名与目标背景一一对应（thumb-rain.jpg→ 切换到bg-seq/rain-）
用 loading="lazy" 对动态背景图无效，得手动控制加载时机
CSS background-image 不响应 loading="lazy" 属性——这个属性只对 <img> 标签生效。很多开发者把 GIF 放进 <img> 标签再用 position: fixed 模拟背景，结果发现首屏白屏、滚动卡顿，就是因为浏览器把这张“背景图”当普通内容图去懒加载了，等它进入视口才开始下载。
正确做法是：
- 纯 CSS 背景：用
preload提前拉取关键帧，例如在加<link rel="preload" as="image" href="img/bg-gif/star-trail.gif"> - Canvas 动态背景：在
window.addEventListener('load', ...)后再初始化粒子系统，避免阻塞 HTML 解析 - 点击切换类：用
new Image().src = url预加载目标图，加载完成才允许用户点击切换，否则点下去是空白
background-size: cover 在移动端常导致裁切错位，必须配合 background-attachment 和媒体查询
桌面端看着完美的 cover 效果，到了 iPhone 上可能人物脸被切掉一半——这不是图片问题，是 Safari 对 background-attachment: fixed 的实现差异。iOS Safari 会强制将 fixed 背景转为 scroll，导致视口滚动时背景相对位移异常。
实操建议：
- 禁用
background-attachment: fixed，改用 JS 监听scroll手动调整background-position偏移量（仅对 Canvas 或 SVG 背景有效） - 对纯 CSS 背景，在
@media (max-width: 768px)中把cover改为contain，并加background-position: top center保主体不被裁 - 测试真机时重点看 Safari 的
background-size渲染结果，Chrome DevTools 的设备模拟器会高估兼容性
Canvas 动态背景的图片资源必须压缩+转 WebP，否则低端机直接掉帧
Canvas 粒子系统每帧都要 drawImage() 多次，如果贴图是未压缩的 PNG（比如 2MB 的 rain-drop.png），低端 Android 机上 requestAnimationFrame 很容易从 60fps 掉到 20fps，且内存占用飙升。
必须做的三件事：
- 所有 Canvas 用图走 WebP 格式，用
cwebp -q 75压缩，体积通常比 PNG 小 60% 以上 - 预加载阶段检查
image.width和image.height，若为 0 表示解码失败，需 fallback 到低分辨率版本（如rain-drop-ld.webp） - 避免在
drawImage()中反复创建新Image实例，所有贴图应复用已加载好的HTMLImageElement对象
Canvas 背景最容易被忽略的不是动画逻辑，而是贴图加载失败后没有降级策略——用户看到的不是“慢一点”，而是整个背景区域黑块或白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
