低网速下h5图片加载应采用骨架屏占位，用div容器显式设置宽高和aspect-ratio，伪元素实现动画，内联svg作背景，骨架与真实图片在尺寸、圆角、阴影上严格一致，并配合webp压缩、srcset精简和lazyload优化。
在低网速下，H5 页面中图片加载延迟明显，用户容易看到空白或布局跳动。此时不能只靠「等图加载完再显示」，而要提前用骨架屏占位，并确保它和真实图片在尺寸、比例、圆角、阴影上完全一致，避免视觉断裂。
用容器元素承载骨架，不依赖 img 标签
图片本身未加载时，<img> 的 src 还没触发请求，直接给它加背景色或动画无效——因为它是 inline 元素，默认无宽高，背景不渲染。正确做法是：
- 用
<div class="img-placeholder"></div>作为独立容器，显式设置width、height和aspect-ratio - 骨架样式通过
::before或::after伪元素实现，不影响语义结构 - 背景图优先用内联 SVG：
background-image: url("data:image/svg+xml, ...")，免去额外 HTTP 请求
骨架与真实图片严格对齐
骨架屏不是装饰，而是视觉过渡的关键。如果骨架的宽高比、圆角值、边框阴影和最终图片不一致，加载完成瞬间就会“跳一下”，破坏体验：
- 首屏图片必须设内联
width和height（如width="750" height="422"），让浏览器提前预留空间 - CSS 中统一使用
aspect-ratio: 16/9（兼容 Safari 15.4+）；老版本用padding-top: 56.25%+position: relative降级 - 骨架的
border-radius、box-shadow必须和真实图片容器完全相同
懒加载 + 骨架动画协同控制
低网速下，图片加载耗时长，骨架不能静态挂在那里。需要配合渐变动画模拟“扫描感”，但必须避免闪白或过早消失：
- 用
background: linear-gradient(to right, #ececf0 8%, #d3d3d9 18%, #ececf0 33%)模拟光扫效果 -
background-size设为远大于容器宽度（如800px 45px），再通过@keyframes动态改变background-position - 真实图片加载完成时，用
visibility: hidden切换骨架层，而非display: none，防止重排 - 禁用
img[src]选择器控制显隐——懒加载常先清空src或用data-src，该选择器根本不会匹配
首屏图片资源精简与 fallback 保障
骨架只是体验层优化，底层还得减少加载压力：
- 首屏图片强制用 WebP 格式，体积比 JPEG 平均小 25%～30%
-
<picture></picture>的srcset只保留实际 CSS 媒体查询中会触发的断点（如768w、1200w），删掉冗余尺寸项 - 必须写
sizes属性，例如sizes="(max-width: 768px) 100vw, 50vw"，否则浏览器按100vw下载大图，浪费带宽 - 所有首屏外图片启用
loading="lazy"，并配合 IntersectionObserver 做更精细的触发时机控制
