懒加载与预加载的选择，或是闲时加载 (有这种方案吗)？

[vevlins]

电商性质的页面，所以图片资源很多。 首屏速度肯定要考虑，现在是所有图片都是懒加载，但是这样滚动的时候会出现图片的卡顿。 有什么好的解决方案吗，能够兼顾首屏速度和滚动加载的流畅？

[yangg]

优化 cdn 速度与图片大小，预加载一两行

[chenxiaohuan]

1 楼的方案不错，首屏进入视图的先懒加载，视图内加载完后可以预加载 1 到 2 行的图片资源，这样滚动加载会流畅很多，关键还是优化好图片大小和 cdn 速度比较靠谱点。

[jin5354]

思路非常简单的，就是关键资源优先加载+非关键资源闲时加载
1. 图片资源最重要的是优化图片大小，包括压缩，改格式，和服务器端裁剪（手机给适当分辨率的小图）
2. 首屏最重要的几张图最先加载
3. 闲时加载，关键资源加载完后自动开始加载剩余资源，可以用 prefetch + preload 等操作也可以手操（在 onload 事件之后用 new Image.src 等）
4. 都没命中的图片再在滚动入窗口时发请求