电商性质的页面,所以图片资源很多。 首屏速度肯定要考虑,现在是所有图片都是懒加载,但是这样滚动的时候会出现图片的卡顿。 有什么好的解决方案吗,能够兼顾首屏速度和滚动加载的流畅?
1
yangg 2018-05-28 10:39:08 +08:00 via iPhone 1
优化 cdn 速度与图片大小,预加载一两行
|
2
chenxiaohuan 2018-05-28 11:06:54 +08:00 via Android 1
1 楼的方案不错,首屏进入视图的先懒加载,视图内加载完后可以预加载 1 到 2 行的图片资源,这样滚动加载会流畅很多,关键还是优化好图片大小和 cdn 速度比较靠谱点。
|
3
jin5354 2018-05-28 11:33:43 +08:00 1
思路非常简单的,就是关键资源优先加载+非关键资源闲时加载
1. 图片资源最重要的是优化图片大小,包括压缩,改格式,和服务器端裁剪(手机给适当分辨率的小图) 2. 首屏最重要的几张图最先加载 3. 闲时加载,关键资源加载完后自动开始加载剩余资源,可以用 prefetch + preload 等操作也可以手操(在 onload 事件之后用 new Image.src 等) 4. 都没命中的图片再在滚动入窗口时发请求 |