VPF::Ожидание загрузки изображений

daNick

Дата 1.11.2011, 09:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 114
Регистрация: 12.8.2006
Где: Казахстан, Астана

Репутация: нет
Всего: нет

Добрый день.

Я подгружаю ajax-запросами ( $('#container-div').load(url, function(){...}). Callback-функция отрабатывает сразу, как только загружается содержимое по url, но там есть элементы img, в которых src указывает на сторонний сайт (превьюшки с youtube), а коллбэк не ждёт, пока эти изображения загрузятся. Как его заставить подождать загрузки картинок?

Это сообщение отредактировал(а) daNick - 1.11.2011, 09:22

--------------------

Долго не кончать - преимущество мужчины, а не оратора.Я так много читал о вреде курения, что решил бросить... читать.(с) Сергей Довлатов

$дмитрий

Дата 1.11.2011, 12:57 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45

Код


$('#container-div img').load(function() {
  // картинки загружены
});

ksnk

Дата 1.11.2011, 14:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

$дмитрий, вот только не "картинки" а "картинка", одна из. Чтобы проконтроллировать загрузку всех картинок (не понимаю зачем бы это было в действительности надо smile

) следует посчитать их количество и при каждом onload его уменьшать. Что-то вроде такого

Код


function ajaxLoad(selector, url,onComplete, onFullLoad) {
   $(selector).load(function (data) {
       var 
           $imgs=$(this).find('img'),
           imgcnt=$imgs.length,
           $this=this;
       $imgs.each(function(){
           if(!this.complete) $(this).bind('load',function(){
               if(--imgcnt ==0){
                   if (onFullLoad && typeof(onFullLoad) == 'function') {
                       onFullLoad.call($this, data)
                   }
               };
           })
       })
       if (onComplete && typeof(onComplete) == 'function') {
           onComplete.call( this, data)
       }
       $imgs=null; // a little help of clearing a heap...
   })

}

...

ajaxLoad('#container-div',url
     , function(){...}
     , function (){ alert('all images loaded')}
);

Это сообщение отредактировал(а) ksnk - 1.11.2011, 15:44

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

daNick

Дата 1.11.2011, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 114
Регистрация: 12.8.2006
Где: Казахстан, Астана

Репутация: нет
Всего: нет

ksnk, делаю небольшой сайтик знакомым заказчикам)) функционал весь реализован, теперь добавляю свистелки-перделки, на которую в первую очередь обращает внимание простой обыватель. Коллбэк по окончании загрузки изображений нужен был для плавного растяжения контейнера. Оказалось, все решалось тривиально для этого случая:

Код


$('img').bind('load', function(e){
    var newHeight = $('#container').height();
    $('#container-div').animate({'height': newHeight}, 100);
})

P.S.: Я этот вариант пробовал, но, видимо, у меня поначалу был какой-то косяк, поэтому он не работал. Сейчас всё выправил.

Это сообщение отредактировал(а) daNick - 1.11.2011, 16:01

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »