Выполнить код на jQuery после загрузки изображений

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

Как выполнить код на jQuery только после загрузки картинок

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

Ну да ладно, перейдем к коду:

Происходит следующее: в переменную images мы записываем «все наше изображения», а в counter — число элементов на странице. Для своего примера, вы можете выбрать загрузку только изображений внутри таблицы и получилось бы

После этого, для каждого изображения запускаем функцию imageLoaded, которая при загрузке изображения уменьшает нашу переменную counter на 1 (декремент или декрементирование). Как только наш счетчик будет равен 0, это будет означать, что все наши изображения загрузились, а высота и положение таблицы всегда будет считаться правильно. Надеюсь данный материал помог вам искоренить сей неприятный нюанс 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *