当页面有大量图片，需要如何优化加载，提升用户体验

1，图片懒加载，未在可视区域不进行加载

2，图片预加载，当是轮播图和幻灯片时

3，当使用css图片时，选择雪碧图CSSsprite，SVG图。

4，当图片过大时，使用特殊编码的图片，加载时先展示一张压缩的图片，提升用户体验。

一：图片懒加载的实现思路。

1. 将所有需要懒加载的图片的 src 替换为占位符，真实地址存入 data-src。

2. 使用 Intersection Observer 或滚动事件监听判断图片是否进入视口。

3. 触发加载后，将 data-src 赋值给 src。

4. 加载完成后添加动画效果，提升体验。

5. 处理动态内容和兼容性兜底。

二：图片的预加载（幻灯片）的实现思路

(1) 确定当前展示的图片索引

(2) 计算需要预加载的相邻索引

(3) 触发预加载（创建 Image 对象加载图片资源，但不插入 DOM：）

(4) 初始化时预加载

(5) 切换图片时更新预加载（通过 loaded 属性避免重复加载。）