V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vevlins
V2EX  ›  前端开发

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

  •  
  •   vevlins · 2018-05-28 10:07:27 +08:00 · 2030 次点击
    这是一个创建于 2362 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    3 条回复    2018-05-28 11:33:43 +08:00
    yangg
        1
    yangg  
       2018-05-28 10:39:08 +08:00 via iPhone   ❤️ 1
    优化 cdn 速度与图片大小,预加载一两行
    chenxiaohuan
        2
    chenxiaohuan  
       2018-05-28 11:06:54 +08:00 via Android   ❤️ 1
    1 楼的方案不错,首屏进入视图的先懒加载,视图内加载完后可以预加载 1 到 2 行的图片资源,这样滚动加载会流畅很多,关键还是优化好图片大小和 cdn 速度比较靠谱点。
    jin5354
        3
    jin5354  
       2018-05-28 11:33:43 +08:00   ❤️ 1
    思路非常简单的,就是关键资源优先加载+非关键资源闲时加载
    1. 图片资源最重要的是优化图片大小,包括压缩,改格式,和服务器端裁剪(手机给适当分辨率的小图)
    2. 首屏最重要的几张图最先加载
    3. 闲时加载,关键资源加载完后自动开始加载剩余资源,可以用 prefetch + preload 等操作也可以手操(在 onload 事件之后用 new Image.src 等)
    4. 都没命中的图片再在滚动入窗口时发请求
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1325 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 23:26 · PVG 07:26 · LAX 15:26 · JFK 18:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.