Одна из обсуждаемых тем на форумах — как сделать 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 указывается путь до изображения. Это, пожалуй, всё. Подобные вещи можно использовать в различных галереях, и т.д., в общем, там, где предположительно придется ожидать какое-то время момента полной загрузки большого изображения.
Интересно что скажут на это поисковые системы..
ты дурак что-ли?
А мне кажется что ты дурак. Ты не понял смысл его слов. Ну да ты пока еще нуб, не знаком с SEO