Блог

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

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

Вот пример:

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

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

ПРАВКА 1: Я очистил и прокомментировал код в моем jsfiddle, чтобы сделать пример более понятным.

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

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

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

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

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

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