JS如何同步阻塞地加载图片

Question

问题描述

如果我们加载一张图片的时候，我们常常会写：

let image = new Image();
image.onload = () => {
    // deal with downloaded image
};
image.src = path;

但是这样的的过程显然是异步回调的。请问在用原生js的前提下，有没有同步阻塞的写法呢？

更新

有人问问题背后的问题，嗯……问题背后当然是有问题的，要不然我也不会费这么大力气同步。
我在用webgl写渲染，随着demo越来越大，代码也变得越来越丑陋。于是就想着封装。

假如一个场景中有一个物体Car，那么我希望代码可以简答粗暴地写成如下的样子：

let car = new Car();

function render() {
    car.draw();
    requestAnimationFrame(render);
}

requestAnimationFrame(render);

但是这就要求在Car类内部需要处理好所有的加载问题。

class Car {
    constructor() {
        // load shader
        // load texture
    }
    draw() {
        // use shader and texture to render
    }
}

在构造函数中加载，而draw依赖于构造函数中加载的完成。可以考虑用Promise，但是很惭愧我对Promise这一套还不甚熟悉。而且很不确定是否能和webgl混在一起用。
如果有人了解的话并回答的话，非常感谢！

Answer 1

后来，题主重构代码时，选择在一开始用Promise并发加载所有素材，然后再开始渲染，之后的逻辑就全部串行做。

Answer 2

用XHR自己阻塞地下载图片, 下载后从blob生成data uri或blob url, 设置上去

其实没有什么好处..

Answer 3

貌似没有 可以用同步的ajax获取图片的数据后赋值给img试试 但是 为什么要同步的呢？

Answer 4

你在onload调起的之后再new Image不就行了

Answer 5

递归啊...