![]() |
---|
|
Использование иконок загрузки
Представьте ситуацию, когда Вы заходите на новый сайт. Все содержимое сайта, которое Вам необходимо, как-будто не грузится. Вы не знаете происходит ли что-либо или просто на странице ничего нет. В конце концов, Вы покидаете страницу. Такая ситуация очень распространенная, когда на разных сайтах используются большие файлы при загрузке. Чтобы справиться с такой ситуацией необходимо использовать иконку загрузки, которая будет показывать что сайт грузится. В данном простом уроке Вы узнаете как это сделать на своей страничке. Демо версия с расположеннием иконки по центру находится здесь. Файлы можно скачать тут. Нам понадобится: 1. Иконка загрузки, которую можно выбрать тут. Для нашего урока я буду использовать: 2. В начале документа между тегами <head></head> необходимо подключить jQuery (помните про путь к файлу). <script type="text/javascript" src="jquery.min.js"></script> 3. Добавим функцию сразу после верхнего кода, которая будет прятать слой ("large-img") с контентом (в примере используется большая картинка, но на ее месте может быть что-угодно) до тех пор, пока он полностью не загрузится. После загрузки функция будет его выводить, а слой ("loader") с иконкой прятать. $(function() { 4. HTML <img id="loader" src="ajax-loader.gif" alt="Loading, Loading!"></img> Вот и все! Пользуйтесь. P.S. по просьбе наших уважаемых посетителей предлагаю Вам CSS код, который поможет поместить иконку загрузки по центру: <style type="text/css"> Для того, чтоб все работало необходимо обязательно знать ширину и высоту картинки загрузки. В нашем примере высота - 22 пикселя, ширина - 126 пикселей. Ее мы задали в коде. Также в двух строках Вам необходимо будет внести 50% ширины и высоты. Также необходимо будет присвоить картинке класс "centered": <img id="loader" class="centered" src="ajax-loader.gif" alt="Loading, Loading!"></img> Вот и все отлично работает :) Данный урок подготовлен для Вас командой сайта http://ruseller.com
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
Прикольно! Оставить комментарий: |
|
---|
|