Главная   Новости   Поиск   
Азбука программиста




Яндекс.Метрика

Загружаем картинки в фоне

Загружаем картинки в фоне

Имеется тенденция, что интернет-сайты постепенно стремятся из текстового представления  к графичесскому. Отсутствие картинок на веб-сайте часто свидетельствует о его несостоятельности. Рассмотрим приемы реализации состоятельного сайта. Итак, нужен красивый сайты с большим количеством красивый иконок, кнопок, картинок. Но вот незадача: картинки должны быть качественными, а следовательно - большими по объему. Если не учитывать во внимание объем загружаемой информации, то наш сайт будет загружаться долго и не свякий посетитель дождется загрузки. 

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

При открытии сайта мы будем загружать превью. Если пользователь захочет увидеть оригинальное изображение, он должен будет щелкнуть на превьюшке.

Часто встречающийся пример – индикаторы загрузки. Существует бесплатный сервис, который делает такие загрузчики.

Метод работы приблизительно такой:

  • гость тыкает на кнопку;
  • производится JavaScript функция;
  • после получения ответа сервера.

И вот здесь появляется неувязка. Время загрузки изображения может быть соизмеримо с течением времени выполнения запроса. Т.е. гость нажмет на кнопку игры раскраски Винкс, а реакция на это нажатие появится через несколько секунд (зависимо от скорости канала связи). Правда при повторном нажатии на кнопку задержек не будет, т.к. картина с анимацией будет взята из кэша браузера.

Разумеется, что если картина будет загружена в кэш до того, как гость нажмет на кнопку, то трудности с задержкой не возникнет. Самое просто решение – загружать все нужные изображения сходу при загрузке странички. Для этого в конец странички необходимо воткнуть блок с рисунком и сделать его сокрытым. К примеру, так:

CSS правило, которое прячет блок с классом hide:

.hide { display: none; }

Видите ли, ничего сложного. Но в любом случае загрузку оригиналов изображений лучше делать с помощью Ajax - запросов к серверу. Такая реализация позволит открывать изображения в фоновом режиме. Как минимум - это хороший тон для современных сайтов.



Безопасность

В этой статье приводятся методы борьбы с вирусами. Опишем типовую ситуацию, которая знакома многим пользователям ПК: установлен новый антивирус, раз в день обновляются базы, все подозрительные файлы сразу удаляются. В один ясный, солнечный день вы приходите к другу и чтобы показать новые фотки, подключаете свою флешку к его компу. Но антивирус начинает вам говорить, сколько вирусов он отыскал на вашей флешке...

Читать далее