V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

js 加载图片的 onload,能把异步回调函数改成同步的吗,因为想要加载多张图片然后再通过 canvas 画图,用 onload 要套好多层

  •  
  •   zxCoder · 2021-08-01 10:18:38 +08:00 · 1332 次点击
    这是一个创建于 1245 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Quarter
        1
    Quarter  
       2021-08-01 10:25:24 +08:00 via iPhone
    判断图片加载完成,基本还是 onload
    xiangyuecn
        2
    xiangyuecn  
       2021-08-01 10:36:03 +08:00
    for 里面一次性创建 100 个 image,onload 、onerror 计数到 100 即完成加载,还他娘的是并发的🐶
    SoloCompany
        3
    SoloCompany  
       2021-08-01 11:30:43 +08:00
    const load = img => new Promise((resolve, reject) => img.onload(resolve) & img.onerror(reject));
    await Promise.all(imgs.map(load))
    0o0o0o0
        4
    0o0o0o0  
       2021-08-01 11:34:53 +08:00
    设置一个 map <图片,状态>,包含所有图片,每张图片加载完都设置此图片状态为完成,然后每次完成一个图片加载都检查是否全部完成,如果全部完成就画 canvas
    maplerecall
        5
    maplerecall  
       2021-08-01 14:09:48 +08:00 via Android
    你需要的不是同步,而是有个能确保所有图片都加载完的方法,上边的几种方法都是这个原理,理解了就容易写了。
    Danswerme
        6
    Danswerme  
       2021-08-01 23:10:29 +08:00 via iPhone
    三楼的方法正解,放在 Promise.all 后面就可以确保所有图片都加载完成了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1525 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:03 · PVG 01:03 · LAX 09:03 · JFK 12:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.