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, 设置上去

其实没有什么好处..