Этого можно достичь с помощью AJAX.
Когда вы впервые загружаете страницу, поместите заполнители туда, куда должен попасть тяжелый контент. Например, используйте div с характерным стилем и анимированным загрузочным изображением внутри, чтобы посетители могли четко сказать, что происходит дальнейшая загрузка. Вы можете сгенерировать знакомые изображения загрузки AJAX на ajaxload.info .
В нижней части страницы есть скрипт, который вызывает или связывает необходимые функции для загрузки дополнительного контента с использованием AJAX. Вы можете привязать AJAX-вызов к jQuery .ready(), например, чтобы начать загрузку, как только остальная часть документа будет готова, или .scroll(), чтобы начать, когда пользователь прокручивает определенный элемент (например, мимо определенных «ориентиров» на ваша страница, которая разделяет блоки контента).
При получении ответа AJAX, который содержит дополнительный контент (предпочтительно предварительно отформатированный как HTML в виде строки), замените содержимое заполнителя div на ответ AJAX, используя .innerHTML = или jQuery .html(). Измените стиль div при необходимости, используя setAttribute("class","newClass") или jQuery .attr("class","value"), чтобы заменить его класс CSS.
Посетитель сможет увидеть вашу полную страницу и прокрутить ее во время загрузки. Дополнительный контент появится, когда он будет готов, не прерывая работу посетителя. Вы можете сделать это немного приятнее для глаз, анимируя переходы после внедрения контента.
Если вам нужны дополнительные примеры использования AJAX для асинхронной выборки контента, взгляните на эти для классического подхода JavaScript или jQuery .ajax () docs .