javascript - 如何使图像同步加载？

Question

我想创建一个具有图像属性的对象，但我希望构造函数仅在图像加载后完成运行。或者用代码来描述:

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.
          }
     }


})

对于那些不熟悉我在脚本中使用的类表示法的人，它基于 this

有什么想法吗？

Answer 1

这是可能的，但只有使用Base64 和Data-URL 的古老技术。

转换为 Base64 的 GIF 图片。

rune .b64

R0lGODlhIwAjAIAAAP///wAAACwAAAAAIwAjAAACf4SPqcsb3R40ocpJK7YaA35FnPdZGxg647kyqId2SQzHqdlCdgdmqcvbHXKi4AthYiGPvp9KVuoNocWLMOpUtHaS5CS54mZntiWNRWymn14tU7c2t6ukOJlKR5OiNTzQ7wb41LdnJ1coeNg3pojGqFZniPU4lTi0d4mpucmpUAAAOw==

JavaScript 通过阻止 AJAX 从同一服务器加载转换后的图像。

加载器.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 被阻塞，直到图像加载完毕

这是一个非常邪恶的方式