pc网站层 图片的优化

Question

在网站层上运用到了banner图片的滚动（使用了background-image） 现在有个问题是网站层的banner有点多 在加载的时候总是先加载图片（图片在200k以内） 导致了一些核心的js加载慢。有优化的方法吗？

Answer 1

一开始banner只放第一张显示的图，在第一张显示的图加载好了之后，在用js向banner添加其他其他的图并加载

Answer 2

1,合成雪碧图，通过background-position 控制
2,换成 img 标签，在展示第一张banner之前，指定第一张图片的src，需要展示第二张banner之前指定第二张图片的src，然后在img的onload事件中切换banner

Answer 3

1.图片懒加载

把background-image设置为空或弄张占位图片
给每张图片添加个attr，比如data-original存图片链接
banner每次触发滚动将background-image替换为data-original即可

2.用CDN加速