vevlins

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

  •  
  •   vevlins · May 28, 2018 · 2752 views
    This topic created in 2913 days ago, the information mentioned may be changed or developed.

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

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