Мое изображение загружено, но его высота и ширина еще не обновлены. Когда это происходит? - PullRequest
Новая
       11

Мое изображение загружено, но его высота и ширина еще не обновлены. Когда это происходит?

4 голосов
/ 24 мая 2011

Я использую плагин jQuery , который вызывает обратный вызов после загрузки всех изображений на странице.Он проверяет свойство imageObject.complete и привязывает обработчик к событиям load и error, чтобы определить, когда загрузка изображения завершена.

Это работает хорошо, но проблема, с которой я сталкиваюсь, заключается в том, чтодаже если изображение считается загруженным, когда я проверяю свойства height и width изображения или содержащего его элемента div, размеры еще не обновлены.

Вот пример:

http://jsfiddle.net/RtnVx/12/

Как я могу убедиться, что размер содержащего элемента был изменен в соответствии с размером до того, как попытается получить доступ к его height и width размерам?

РЕДАКТ. 1: Я очистил и прокомментировал код в моем jsfiddle, чтобы облегчить понимание примера.

РЕДАКТИРОВАТЬ 2: условие гонки или вариация, основанная на кешировании, потому что когда я запускаю код с другой машины, он работает правильно (т. е. верхнее поле рассчитывается правильно), что на самом деле не хорошо , поскольку оно не согласовано.Несоответствия более очевидны в Chrome, FWIW.

Кроме того, чтобы быть ясным, цель не состоит в том, чтобы вызывать init каждый раз, когда загружается изображение;скорее init следует называть один раз после загрузки всех изображений через вызов AJAX load.

1 Ответ

3 голосов
/ 24 мая 2011

Ответ: http://jsfiddle.net/morrison/RtnVx/30/

Вам не нужно было звонить batchImageLoad, пока изображение не было загружено. Я создал событие для загруженного изображения.

Обновлены примечания:

  • Я отключил твой плагин jQuery. Это было слишком сложно, и я не совсем понял его.
  • Мое текущее решение обеспечивает обработку ошибок с помощью события error, как и плагин.
  • Процесс решения:
    • Найдите все img по убыванию с #slides и сохраните эту длину в атрибуте .data(), а также в переменной, чтобы сохранить количество загруженных.
    • Привязывайте события load и error к каждому img, что обновляет количество загруженных изображений.
    • Если количество загруженных / ошибочных изображений достигнет общего количества изображений, вызывайте setTimeout(), пока все они не будут иметь ширину, превышающую ноль, а затем вызовут init().
...