panda_nax

Анимация загрузки аяксом фотогалереи в выбранный 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, но он вызывается до подгрузки картинок. Кароче запутался, помогите, кто сталкивался с таким.
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
11.06.2010, 06:50
Ответы с готовыми решениями:

События после загрузки аяксом
Проблема довольно распространенная, кое-какие решения нашел, но где-то явно туплю: Выпадающий список посылает аякс-запрос, получает...

Анимация загрузки во время загрузки
Есть скрипт который создает анимацию загрузки страницы, но мне надо бы что бы эта анимация появилась во время когда я загружаю файл или...

Анимация загрузки
Хай ребят!!! Я хочу реализовать анимацию загрузки в виде повторного движения квадрата или прямоугольника в центре формы например, ...

1
36 / 36 / 8
Регистрация: 13.05.2010
Сообщений: 70
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');
    });
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
11.06.2010, 15:23
Помогаю со студенческими работами здесь

Анимация загрузки.
Можно ли в Delphi сделать анимацию в виде загрузки? Т.е. чтобы на формерасплогалась анимация и через некоторое время форма закрывалась и...

Анимация загрузки
Здравствуйте! Есть метод, во время выполнения которого, приложение зависает на несколько секунд, хотелось бы, чтобы во время этого...

анимация загрузки
Хай,кто нибуть может помочь с анимацией, хотябы крайне напоминающей загрузку виндовс) именно момент где появляется надпись Windows Xp и...

Анимация загрузки
Здравствуйте! не подскажите кто ни будь видел реализованный класс(прогресс бар) для win form типа вида представленного на рисунке.

Анимация загрузки
Надо отобразить анимацию загрузки. Допустим есть надпись &quot;Loading *%&quot;, когда * доходит с 1 до 100 то прописываются следующие команды,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
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, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru