Получение размера предварительно загруженного изображения JavaScript - PullRequest
2 голосов
/ 22 июля 2010

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

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

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

        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;
    },

Кажется, у меня есть две проблемы:

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

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

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

РЕДАКТИРОВАТЬ: по предложению mplungjan я предварительно загрузил в скрытый div, что помоглоя с проблемой б).Все еще нет решения проблемы а) хотя;сообщает о завершении = ложно один раз и больше не вызывается

1 Ответ

1 голос
/ 26 июля 2010

Я пойду дальше и отвечу на свой вопрос.

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

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

...