Такая ситуация очень распространенная, когда на разных сайтах используются большие файлы при загрузке. Чтобы справиться с такой ситуацией необходимо использовать иконку загрузки, которая будет показывать что сайт грузится.

Нам понадобится:

1. Иконка загрузки, которую можно выбрать тут или тут. Для нашего урока я буду использовать:
2. В начале документа между тегами необходимо подключить jQuery (помните про путь к файлу).
   <script type="text/javascript" src="jquery.min.js"></script>

3. Добавим функцию сразу после верхнего кода, которая будет прятать слой ("large-img") с контентом (в примере используется большая картинка, но на ее месте может быть что-угодно) до тех пор, пока он полностью не загрузится. После загрузки функция будет его выводить, а слой ("loader") с иконкой прятать.
   1. $(function() {
   2. $('#large-img').hide();
   3. $('#large-img').load( function() {
   4. $('#loader').hide();
   5. $('#large-img').show();
   6. } );
   7. });
4. HTML.
   1. <img id="loader" src="ajax-loader.gif" alt="Loading, Loading!"></img>
   2. <img id="large-img" src="wheel.jpg" alt="London Eye"></img>
5. CSS код, который поможет поместить иконку загрузки по центру.
   1. <style type="text/css">
   2.     .centered {
   3. position: fixed;
   4. top: 50%;
   5. left: 50%;
   6. margin-top: -11px; /* 50% высоты */
   7. margin-left: -63px;  /* 50% ширины */
   8. height: 22px;
   9. width: 126px;
   10. }
   11. * html .centered {
   12. position: absolute;
   13. }
   14. </style>

   Для того, чтоб все работало необходимо обязательно знать ширину и высоту картинки загрузки. В нашем примере высота - 22 пикселя, ширина - 126 пикселей. Ее мы задали в коде. Также в двух строках Вам необходимо будет внести 50% ширины и высоты.

6. Также необходимо будет присвоить картинке класс "centered".
   <img id="loader" class="centered" src="ajax-loader.gif" alt="Loading, Loading!"></img>

Статьи по теме:

• Оптимизация .htaccess 1
• 3 способа ускорить Ваш сайт с помощью PHP 1
• Скрипт для оптимизации загрузки сайта 1