fggavrilov

Вот так будет прыгать:

<p><img src=picture.jpg></p>
<p>Текст, текст, текст, текст, текст</p>

А вот так не будет:

<p><img src=picture2.jpg width=300 height=200></p>
<p>Текст, текст, текст, текст, текст</p>

Причина проста. Браузер всегда покажет абзац с текстом, не дожидаясь, пока загрузится картинка. Чтобы пользователь смог скоротать время за чтением текста.

Но тут у браузера возникает вопрос:
— А сколько свободного места оставлять под картинку?

Если мы размеры сразу укажем в html (300*200), браузер воспользуется нашей подсказкой и оставит 200 пикселей по высоте пустого места, чтобы потом там отобразить загруженную картинку.

Но если мы не укажем размеры картинки в html, у браузера этой информации не будет. Размер необходимого свободного места под картинку будет взят наобум. Следующий за картинкой текст будет нарисован на экране сразу после этого "наобум".

Уже потом, когда пользователь успеет прочитать половину текста, а браузер — загрузить картинку, размер нужного для картинки места будет пересчитан. При этом текст придется сдвинуть вниз.

Это и есть "прыжки" контента при загрузке страницы.

P.S. То же самое касается любого динамического контента, который подгружается скриптами после загрузки страницы. Размеры контейнеров под динамический контент нужно указывать сразу.

отследить можно как-то так:


Но на моих сайтах ничего не смещается. Но даже если бы и смещалось, то не вижу смысла выяснять почему =). Че вас это так тронуло?

$("body").on('click', '[href*="#"]', function(e){
	var fixed_offset = 100;
	$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
	e.preventDefault();
});

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