如何同步加载图像？

Question

我想创建一个具有图像属性的对象,但我希望contstructor只在加载图像后才能完成运行.或者用代码来描述:

GraphicObject = Class.extend({

    //This is the constructor
    init: function(){
          this.graphic = new Image();
          this.graphic.src = 'path/to/file.png';

          while(true)
          {
              this.graphic.onload = function(){break;};
              //I know this won't work since the 'break' is on a different context
              //but you got what I try to do.
          }
     }


})

对于那些不熟悉我在脚本中使用的Class符号的人来说,它基于此

有任何想法吗？

Answer 1

这是可能的,但只有在古代艺术的Base64编码和数据URL.

GIF图像转换为Base64.

rune.b64

R0lGODlhIwAjAIAAAP///wAAACwAAAAAIwAjAAACf4SPqcsb3R40ocpJK7YaA35FnPdZGxg647kyqId2SQzHqdlCdgdmqcvbHXKi4AthYiGPvp9KVuoNocWLMOpUtHaS5CS54mZntiWNRWymn14tU7c2t6ukOJlKR5OiNTzQ7wb41LdnJ1coeNg3pojGqFZniPU4lTi0d4mpucmpUAAAOw==

通过阻止AJAX加载转换后的图像的JavaScript形成相同的服务器.

loader.js

var request = new XMLHttpRequest();
var image = document.createElement('img');

request.open('GET', 'rune.b64', false);
request.send(null);

if (request.status === 200) {
  image.src= 'data:image/gif;base64,' + request.responseText.trim();

  document.getElementsByTagName("body")[0].appendChild(image); 
}

问题

• 一些较旧的浏览器不喜欢(大)数据URL
• Base64编码使图像大约增加37%
• 整个UI被阻止,直到加载图像

这是一种非常邪恶的方式

Answer 2

将依赖代码放在回调中.没有其他非邪恶的方式.

GraphicObject = Class.extend({

    //This is the constructor
    init: function(){
          this.graphic = new Image();
          this.graphic.onload = function ()
          {
              // the rest of the ctor code here
          };
          this.graphic.src = 'path/to/file.png';
     }
});

Answer 3

有一种在 Javascript 中同步加载图像的非邪恶方法。

loadImage = async img => {
    return new Promise((resolve, reject) => {
        img.onload = async () => {
            console.log("Image Loaded");
            resolve(true);
        };
    });
};

await随处调用它。像这样

for(let i=0;i<photos.length;i++){
    await loadImage(photos[i]);
}

它将一张一张地加载所有图像。

注意：调用函数必须要async使用await

Answer 4

var timeOut = 5*1000; //ms - waiting for max 5s to laoad
var start = new Date().getTime();
while(1)
  if(img.complete || img.naturalWidth || new Date().getTime()-start>timeOut)
    break;

基于这个答案。