混合程序和事件答案

【问题标题】：Mixing procedures and events混合程序和事件
【发布时间】：2012-08-08 22:04:10
【问题描述】：

我有一个加载图像并检查它是否成功加载的函数。（看浏览器是否支持WebP）

问题是，我必须为此使用 onload() 和 onerror()，这意味着我不能简单地返回一个值。

如何才能延迟返回，直到事件触发？

这是我的代码：

function start_check_webp(){
  var div = document.createElement('div');
  div.innerHTML = '<img id = "test_image" src="test_image.webp">';
  webp_test = div.firstChild;
  div.firstChild.onerror = function(){support_webp = false}
  div.firstChild.onload = function(){support_webp = true}
}

【问题讨论】：

标签： javascript events procedure

【解决方案1】：

你不能。您需要重组代码以处理异步事件。除了让事件处理程序设置变量之外，您还可以让它们调用一个函数，如果支持 WebP 或其他情况，该函数实际上会执行某些操作。

【讨论】：

好吧...那是我的另一个选择，但我更喜欢获得 yes\no 值。只是检查一下，如果不使用事件，没有任何方法可以找出图像加载是否失败，是吗？
@snostorm：不幸的是没有。浏览器需要首先从服务器加载图像，这必然使其异步。（JavaScript 中没有阻塞调用。）

【解决方案2】：

构建您的代码，使其在加载图像后运行。您可以通过使用数据 URI 而不是外部图像来加快处理速度，例如

function testWepP() {
  var webP = new Image();     
  webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIAL' + 
    'mk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
  webP.onload = webP.onerror = function () {
     callback(webP.height === 2);     
  }; 
};

testWebP(function(supported) {
  console.log((supported) ? "webP supported!" : "webP not supported."); 
});

【讨论】：