Смешивание процедур и событий - PullRequest
0 голосов
/ 07 апреля 2011

У меня есть функция, которая загружает изображение и проверяет, успешно ли оно загружается.(Чтобы узнать, поддерживает ли браузер 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}
}

Ответы [ 2 ]

1 голос
/ 07 апреля 2011

Вы не можете. Вам нужно будет реструктурировать свой код для обработки асинхронных событий. Вместо того, чтобы ваши обработчики событий устанавливали переменные, вы могли бы заставить их вызывать функцию, которая действительно что-то делает, если поддерживается WebP или иным образом.

0 голосов
/ 08 августа 2012

Структурируйте ваш код так, чтобы он работал после загрузки изображения. Вы можете ускорить процесс, используя 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."); 
});
...