Процедуры и события смешивания

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