Получение размера javascript preloaded image

Question

Я пытаюсь предварительно загрузить несколько изображений, сгенерированных на сервере, на небольшой веб-сайт. Предварительная загрузка выполняется с помощью setWindowTimeout и использует объект Image, устанавливает обратный вызов onload и затем применяет новый uri запроса.

Для некоторых запросов серверу, возможно, придется сигнализировать о том, что изображение «неизменено», и я делаю это, отправив небольшой файл размером 1x1 пиксель (кажется, мне нужно отправить фактическое изображение, возвращая пустое содержимое чтобы объект Image не запускал загрузку). В моем обработчике onload я хотел бы определить размер получаемого изображения, а затем определить, должен ли я обновлять визуальное изображение с данным изображением.

Ниже приведен фрагмент моего текущего решения (выход является ДИВ, чтобы помочь отладки):

 refresh: function() { 
     var newSrc = '/screenshot.ashx?tick=' + new Date().getTime(); 
     var imgObj = new Image(); 
     var self = this; 

     // this is called when load is done 
     imgObj.onload = function() { 
      //if (imgObj.complete) 
      // return; 
      if (imgObj.width > 1 && imgObj.height > 1) { 
       output.innerHTML += '<br/>Updating image:' + newSrc; 
       img.src = newSrc; //fiddler shows no reload here, read from cache 
      } 
      else { 
       output.innerHTML += '<br/>Empty image:' + newSrc; 
      } 
      self.setupNewRefresh(); 
     }; 

     output.innerHTML += '<br/>Loading image:' + newSrc; 
     imgObj.src = newSrc; 
    }, 

Я, кажется, есть две проблемы:

а) imgObj.complete является ложным, когда функция сначала вызывается, но она вызывается только один раз (отсюда мой комментарий) и

b) Я не могу полагаться на свойство ширины или высоты изображения при загрузке. Из моих тестов на выборку 1x1-пикселя он иногда считывает 50, которые, по-видимому, являются стандартными при создании нового Image(), и иногда он считывает правильный размер 1.

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

EDIT: после предложения от mplungjan я предварительно загрузил в скрытый div, что помогло мне с проблемой b). Тем не менее решение проблемы а) хотя; отчеты полные = ложные один раз и не вызываются снова

Answer 1

Я отвечу на свой вопрос.

Предварительная загрузка изображения в скрытый элемент в DOM вместо элемента уровня кода была трюком для получения правильных размеров (спасибо mplungjan). Вопрос а), а именно полное событие, остается нерешенным.

В качестве побочной заметки я вместо этого использовал XMLHttpRequest, поскольку это позволило посмотреть размер возвращаемой полезной нагрузки.