О web-разработке
и даже немного больше...

Preloader до момента полной загрузки изображения

Одна из обсуждаемых тем на форумах — как сделать preloader до загрузки изображения. В этой статье мы попробуем реализовать preloader с помощью JQuery фреймворка. На данный момент JQuery пользуется большой популярностью среди разработчиков, т.к. предоставляет довольно комфортное взаимодействие javascript и html. Он позволяет легко обратиться к любому элементу DOM, с возможностью полноценной манипуляцией ими, тем самым упрощая процесс разработки.

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

Приступаем к делу, в заголовке html документа подключаем JQuery:

…
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
…

Далее в теле документа вставляем тег , в качестве значения атрибута src по умолчанию будет ссылка на файл с анимацией «загрузки».

<img src="preloader.gif" id="myImg"/>

Затем, после вставки тега изображения, вставляем следующий код:

<script type="text/javascript">
var img = new Image();
img.onload = function() { $('#myImg').attr('src', img.src); }
img.src = 'http://www.href.kz/images/pic.jpeg';
</script>

Обратите внимание, в месте, где идет строка img.src указывается путь до изображения. Это, пожалуй, всё. Подобные вещи можно использовать в различных галереях, и т.д., в общем, там, где предположительно придется ожидать какое-то время момента полной загрузки большого изображения.

Опубликован: 26.08.2013 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Anvar пишет:

    Интересно что скажут на это поисковые системы..

    1. Nikolay пишет:

      ты дурак что-ли?

      1. NickGrey пишет:

        А мне кажется что ты дурак. Ты не понял смысл его слов. Ну да ты пока еще нуб, не знаком с SEO

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта