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

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

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

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

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

<script>
$(function(){

	function imageLoaded() {
		counter--; // уменьшаем значение счетчика
		if( counter === 0 ) {
			// выполняем наш код когда все изображения загрузились
			var offset = $('.main-price-list').offset(),
				height = $('.main-price-list').outerHeight(true); // размер блока включая внешние отступы (margin)
		}
	}

	var images = $('img'); // выбираем все изображения на странице
	var counter = images.length; // количество изображений на странице

	images.each(function() {
		if( this.complete ) {
			imageLoaded.call( this );
		} else {
			$(this).one('load', imageLoaded);
		}
	});

});
</script>

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

var images = $('.main-price-list img');

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