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

混合程序和事件

2 个答案: