Рубрики1
Социалки
Новые статьи

Оригинал сообщения

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

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

 

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

  

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

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

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

LIci WP