Отображение индикатора загрузки изображения с использованием события 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");
    }

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

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@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