CSS HTML Javascript

Простой и нелепый способ сделать заглушку страницы на время загрузки для медленных сайтов

Наверняка ведь бывало такое, что сайт сам по себе красивый, но там недожали картинки, тут слишком много Javascript, там ещё какая-то беда, и сайт загружается медленно, при этом качество верстки страдает (до тех пор, пока не прогрузиться последняя строчка кода и последний бит картинок).

Есть достаточно нелепое решение. Возьмем картинку-скриншот полностью прогруженного сайта, сделаем размер по ширине приблизительно 1000 пикселей, и сохраним в формате PNG. Принципиально, чтобы картинка была именно скриншотом, с соответствующим наполнением. А дальше все просто. Облачаем всё содержимое страницы в какой-нибудь скрывающий тег, например:

Перед этим тегом ставим картинку-скриншот, с шириной 100%:

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

$(function(){
  $('img').hide();
  $('div:hidden').show();
});

И не очень четкая растянутая картинка-скриншот будет заменена на качественную верстку. Зачем это нужно? Не забывайте, что при высоких скоростях интернета в мегаполисах, в глубинке еще актуален даже ДиалАп, так что загрузка «тяжелых» страниц может занять до 30-60 секунд, а что в это время делать пользователю, естественно разглядывать страницу-картинку.


Также рекомендуем: