Отображение индикатора загрузки изображения с использованием события load

@Александр Maler · Регистрация: 25.01.2012

Студворк — интернет-сервис помощи студентам

Всем здравствуйте! Помогите разобраться. Пытаюсь сделать своего рода ротатор изображения, т.е. есть конструкция (таблица с тремя ячейками) в которую подгружаются три изображения, при щелчке на левое или правое изображение картинки перегружаются , создаётся впечатление пролистывания по кругу (т.е. из заранее подгруженного из БД массива). Вот такая конструкция.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="load" >&nbsp;</div>
<table width="1024" border="0" cellspacing="0" cellpadding="0" class="rotator" id="rotate_table" >
  <tr>
    <td colspan="3" id="title" >&nbsp;</td>
  </tr>
  <tr>
      <td width="50" id="left_img" ><a href="#"  sn="" id="left_photo"  ></a></td>
    <td width="400" id="center_img" align="center" ><a href="#" sn="" id="photo"  ><span id="title_photo" ></span></a></td>
    <td width="50" id="right_img" ><a href="#" sn="" id="rigth_photo"  ></a></td>
  </tr>
</table>

Все перегрузки происходят путём смены стилей, бэкграундов и т.п. Вот код скрипта:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
$("#left_photo,#rigth_photo").click(function () {
      var k=$(this).attr("sn");
      var r=/^\d+$/;
      if(!r.test(k))
                {var m = 1;}
             else {
               var m = parseInt($(this).attr("sn")); 
             }   
    ShowGallery(m);
    });
    
    
        $(document).ready(function(){
    var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "loading");   
        }); //Вызываем индикатор загрузки при открытии страницы
        
        
    $(document).ready(function(){ShowGallery(1);}); //Вызов функции с параметром 1 при загрузке страницы
    
    //Рисуем индикатор загрузки
    $("#left_photo,#rigth_photo").click(function () {
        var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "loading");
    });
    //Убираем индикатор после загрузки центральной фотографии
    $("#rotate_table").load(function () {
        var LoadDiv = document.getElementById("load");
        $(this).addClass('load');
    });
    
 
    
 function ShowGallery (id){
    var LeftId;
    var RightId;
    
    //Определяем левую картинку
    if((id-1) == 0){
        LeftId = (ImgContent.length-1);
    }   else {LeftId = (id - 1);}
    
    //Определяем правую картинку
    if((id+1) >= ImgContent.length){
        RightId = 1;
    }   else {RightId = (id+1);}
 
//Заполняем макет
        
        var Left = document.getElementById("left_photo");
        var Center = document.getElementById("photo");
        var Right = document.getElementById("rigth_photo");
        
       
 
Left.setAttribute('style',"background-image: url("+ ImgContent[LeftId][1] +");");
Left.setAttribute('sn',  ImgContent[LeftId][4]);
 
 
Center.setAttribute('style',"background-image: url("+  ImgContent[id][1] +");");
Center.setAttribute('sn',  ImgContent[id][4]);
Center.setAttribute('href',"/object_description.php?articl_id="+  ImgContent[id][3] + "&id_gallery="+ <?php echo $id_gallery; ?> +"");
 
Right.setAttribute('style', "background-image: url("+  ImgContent[RightId][1] +");");   
Right.setAttribute('sn',  ImgContent[RightId][4]);
 
       document.getElementById("title_photo").innerHTML = ''+ ImgContent[id][2] +'';
 
 
 
      
 
 
 
      }

массив ImgContent заполняется чуть выше в php я не стал приводить тот отрывок кода т.к. там всё в порядке. Проблема вот в чём: При загрузке изображения я вот этому div-у

HTML5
1
<div id="load" >&nbsp;</div>

добавляю класс в js

JavaScript
1
2
3
4
$(document).ready(function(){
    var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "loading");   
        }); //Вызываем индикатор загрузки при открытии страницы

и на страничке начинает крутиться гифовая картинка. После чего я пытаюсь обратиться ко всей таблице (в которой в конечном счёте крутятся картинки) id таблицы "rotate_table" , и если она загрузилась со всеми элементами пытаюсь присвоить гифовой картинке, а точнее контейнеру где она лежит другой класс со стилем display:none вот код:

JavaScript
1
2
3
4
5
//Убираем индикатор после загрузки центральной фотографии
    $("#rotate_table").load(function () {
        var LoadDiv = document.getElementById("load");
        $(this).addClass('load');
    });

В общем проблема в том, что событие load у меня не срабатывает. Ставил aert в обще до алерта не доходит. Что делать не пойму. Может у кого свежие мысли будут. Подскажите плз. Заранее спасибо. Посмотреть сам скрипт можно тут. Щёлкните на многоэтажные дома, там больше картинок. =)

@Schtrich · 28.01.2012, 19:55

а в консоли что?

@Александр Maler · 28.01.2012, 21:37 **[ТС]**

Ээм, не совсем пойму, о какой консоли вы говорите?

@Schtrich · 28.01.2012, 21:48

а столько умных кодов выложили и не знаете что такое консоль, напр. я в хроме вот что выводится в консоли при открытии это страницы:

Отображение индикатора загрузки изображения с использованием события load

в Firefox немного по другому, в каждом браузере своя консоль.
В ней выводятся ошибки и подгружаемые данные.

@Александр Maler · 28.01.2012, 21:58 **[ТС]**

А вы за это, не ничего. Я в Хроме просто не Console пользуюсь а закладкой Script ошибок в том то и дело нет и в FireBug тоже ошибок не выводит, просто событие на загрузке странице load срабатывает и индикатор загрузки отображается, а потом когда табличка с картинками подгружается вот эта штука не срабатывает:

JavaScript
1
2
3
4
5
//Убираем индикатор после загрузки центральной фотографии
        $("#rotate_table").load(function () {
                var LoadDiv = document.getElementById("load");
                $(this).addClass('load');
        });

Я не въеду почему. Может быть есть другой способ?

@Schtrich · 28.01.2012, 22:07

я тоже ни въеду, коды кодами, но самого процесса я не вижу что происходит, я чистую страницу вижу, сделайте архив какой-нть с тестовыми файлами, может гляну.

@Александр Maler · 28.01.2012, 22:10 **[ТС]**

Хорошо.

@Александр Maler · 28.01.2012, 22:28 **[ТС]**

Блин, там надо будет адреса переделать для локального сервера и поправить config_db.php для запуска на localhost в архиве есть дамп базы. Или запускай на поддомене на реальном хостинге. Заранее спасибо!

@Schtrich · 29.01.2012, 00:29

да, с url-ами прийдется повозиться, и еще бд данные в кодировке ANSI, а у меня сервер под utf8 заточен, ну ничего, посмотрим что можно сделать.

Добавлено через 46 минут
да, что-то напрочь отрубает событие load, его как-бы нет.

Добавлено через 58 минут
load работает только с теми элементами у которых есть url, напр. с img, а у твоей таблицы нету никакого url, я хотел на картинки повесить, но не тут-то было, у тебя они идут как бекграунд в стиле к элементу (ссылке), такое не прокатит.

@Александр Maler · 01.02.2012, 12:07 **[ТС]**

Спасибо! Что-нибудь придумаю. =)

Добавлено через 21 час 15 минут
Ну в общем я блоку куда подгружается индикатор загрузки сразу присвоил нужный стиль, ещё в html

HTML5
1
<div id="load" class="loading" >&nbsp;</div>

Вот эти функции закомментил:

JavaScript
1
2
3
4
5
/*$(document).ready(function(){
    var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "loading");   
        }); //Вызываем индикатор загрузки при открытии страницы
        */

и

JavaScript
1
2
3
4
5
6
/*Рисуем индикатор загрузки
    $("#left_photo,#rigth_photo").click(function () {
        var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "loading");
    });
    */

а убираю я его вот так:

JavaScript
1
2
3
4
5
//Убираем индикатор после загрузки центральной фотографии
    window.onload = function(){
        var LoadDiv = document.getElementById("load");
        LoadDiv.setAttribute('class', "load");
    }

всё работает как надо. =)

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	28.01.2012, 19:55
	а в консоли что? 0

@Александр Maler 0 / 0 / 0 Регистрация: 25.01.2012 Сообщений: 7
	28.01.2012, 21:37 [ТС]
	Ээм, не совсем пойму, о какой консоли вы говорите? 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	28.01.2012, 21:48
	а столько умных кодов выложили и не знаете что такое консоль, напр. я в хроме вот что выводится в консоли при открытии это страницы: в Firefox немного по другому, в каждом браузере своя консоль. В ней выводятся ошибки и подгружаемые данные. 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	28.01.2012, 22:07
	я тоже ни въеду, коды кодами, но самого процесса я не вижу что происходит, я чистую страницу вижу, сделайте архив какой-нть с тестовыми файлами, может гляну. 0

@Александр Maler 0 / 0 / 0 Регистрация: 25.01.2012 Сообщений: 7
	28.01.2012, 22:10 [ТС]
	Хорошо. 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	29.01.2012, 00:29
	да, с url-ами прийдется повозиться, и еще бд данные в кодировке ANSI, а у меня сервер под utf8 заточен, ну ничего, посмотрим что можно сделать. Добавлено через 46 минут да, что-то напрочь отрубает событие load, его как-бы нет. Добавлено через 58 минут load работает только с теми элементами у которых есть url, напр. с img, а у твоей таблицы нету никакого url, я хотел на картинки повесить, но не тут-то было, у тебя они идут как бекграунд в стиле к элементу (ссылке), такое не прокатит. 1