Создание прелоадера (загрузчика) на jQuery

И так приступим. Создадим блок в котором будет появляться надпись "Идёт загрузка, ждите..."

Код

<div class="someclass">  
  <div class="loading">  
  Идёт загрузка, ждите...  
  </div>  
  </div>  

А теперь напишем сам скрипт. Он очень маленький как может показаться на первый взгляд

Код
<script>  
  jQuery(function($) {  
  $(window).load(function () {  
  $(".someclass").fadeOut(700);  
  });  
  });  
  </script>

Что он делает: при открытии окна браузера с какой либо страницей скрипт начинает загружать всю нашу страницу целиком, а когда она загрузится произойдет плавное появление нашей страницы! Все довольно просто.

Добавим немного css для блока с текстом "Идёт загрузка, ждите..."

Код

  .loading {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin: -40px 0 0 -150px;  
   
  padding: 10px;  
  background: rgba(0, 0, 0, 0.6);  
  color: #fff;  
  font: normal 11px Verdana;  
  text-shadow: 0 1px 2px #000;  
  text-align: center;  

  border: solid 1px #000;  
  border-radius: 5px;  
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2);  
  }

Теперь небольшие настройки. Если вам нужно загрузить не всю страницу, а например какой то блок, то замените
в скрипте

Код
$(window)

на

Код
$('.myclass')//Указываем класс

или на

Код
$('#myid')//Указываем id элемента

Можно вообще добавить любой тег место класса или индификатора, например тег <img>. 
Будет выглядеть так

Код
$('img')//Указываем все изображения вставленные через тег img

Но тут существует проблема для браузера IE в котором не срабатывает обработчик .load().

Событие load возникает и может быть обработано, когда вызываемый элемент полностью загружается. Обработчик .load() особенно часто применяют при работе с изображениями – ведь в то время, как JavaScript уже начал исполняться, картинки могут быть еще не полностью подгружены, и скрипт рискует не получить какую-нибудь необходимую информацию о них (к примеру, ширину и высоту). Поэтому, чтобы удостовериться, что картинка загружена, и применяют обработчик .load(), посылая ему в качестве параметра функцию – колбэк.

Кто виноват?

Все нормальные браузеры съедают и исполняют такой код как подобает. И, как всегда, только незабвенный Internet Explorer портит всю картину. Дело в том, что изображения в IE кэшируются, и при повторном исполнении скрипта оттуда, из кэша, и достаются – и событие load не происходит, и, соответственно, не обрабатывается, никаких функций обратного вызова не выполняется, и ничего не работает.

Что делать?

Берем изображение и к  его атрибуту src (к адресу, откуда оно будет браться) добавляем рэндомный хвост – параметр – после «?» — так, чтобы адрес картинки приобрел вид:

Код
<img src="/myImage.jpg?slu4aino_sgenerirovannaja_drian"  /> 

В jQuery реализовать это можно, к примеру, подставив в виде параметра вывод текущей даты:

Код
myImge = $("")
.attr("src",anyDynamicSource+ "?" + new Date().getTime());

Таким образом мы обманываем IE , каждый раз передавая ему как бы новый адрес. И теперь и load и его колбэк корректно работают во всех браузерах:

Код
$(myImge).load(function() {
alert("Заработало и в ИЕ!")})


  • FalleN

  • 4823

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!