Анимация загрузки аяксом фотогалереи в выбранный div

11.06.2010, 06:50. **Показов** 4349. **Ответов** 1

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

В Общем такая проблема. Загружаю хтмл код bag.html, содержащей jquery-галерею в див #wrap. Во время загрузки показывается лоадер #load:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$('.bag').click(function(){
        $.ajax({
                    url: "ajax/bag.html", // обращение                     
                    dataType: "html",
                    beforeSend:  function(){$('#wrap').html(''); $("#load").show();  }, // до загрузки показываем лоадер! и убираем текущий код
                    success: function(data){                      
                    $("#load").hide(); // скрываем лоадер!
                    $('#wrap').html(data); //загружаем данные},
                 });
 
        return false;                                
                                   });

Все нормально загружается. Но галерея содержит много картинок. И пользователь видит как она грузится. Как сделать так, чтоб на протяжении подгрузки картинок в галерею, пользователь видел лоадер? Помогите пожалуйста. Пробовал сначала скрывать #wrap, и открывать его в $(window).load, прописанном в заголовке bag.htm. Но $(window).load не запускается как я понимаю потому, что окно то уже загружено, а подгружается только часть странички. $документ.реди работает, прописанный в заголовке bag.html, но он вызывается до подгрузки картинок. Кароче запутался, помогите, кто сталкивался с таким.

@dev001 · 11.06.2010, 15:23

у jQuery есть такие события для ajax запросов
ajaxStart
ajaxSuccess
ajaxStop
ajaxError

например посылаем какой нить запрос и нам нужно показать клиенту псевдо-загрузку тогда например можно написать вот так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#preload-box').ajaxStart(function() {
       $(this).html('<img src="preloader.gif" border="0">');
}).ajaxSuccess(function() {
       $('img', this).remove();
}).ajaxStop(function() {
       $('img', this).remove();
       $(this).text('Загрузка прервана!');
}).ajaxError(function() {
       $('img', this).remove();
       $(this).text('Ошибка подключение!');
});
 
$.get('http://example.com/blabla/blabla/', {
  ... // передадим какие нить параметры
}, function(data) {
    $('#wrap').html(data);
});

это пример для того как использовать события ajax для jQuery

Добавлено через 13 минут
для картинок можно сделать так...

JavaScript
1
2
$('#wrap').html(data); // загрузили в контейнре данный (html)
wait_for_load_all_image(); // покажем загрузку каждой из картинок прелоадером :)

HTML5
1
2
3
4
5
6
<div class="photo">
    <img src="" addr="http://example.com/img/blabla.jpg">
    <div id="preload">
        <img src="http://example.com/img/preload.gif">
    </div>
</div>

Див c id preload это как бы загрушка для основной картинки (исчезнить когда загрузится основная картинка)
Для того чтобы наша картинка была доступна для взора сделаем вот так, пробежимся по всем картинкам в контейнере wrap и для каждой из них в фоне будем загружать действительную картинке и в процесе когда она будет загружена передадим ее адрес в тег img.
сама функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function wait_for_load_all_image() {
    var image_collect = $('#wrap > img');
    image_collect.each(function() {
        var self = this, temp = new Image();
        var preload = $(this).parent().find('preload'); // это для preload контейнера
        
        temp.onload = function() { // картинка загружена можно ее уже показывать
            self.src = temp.src; // тут передаем ей адрес
            preload.hide(); // тут скрываем предзагрузочник или убиваем его
            temp.onload = null;
        };
        temp.src = $(this).attr('addr');
    });
}

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

Опции темы