javascript - 混合程序和事件

Question

我有一个加载图像并检查它是否成功加载的函数。（看浏览器是否支持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}
}

Answer 1

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

Answer 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."); 
});