Загрузка изображений Ajax в XML - загрузка изображения и исчезновение?

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

Открыть UL
Открыть LI
Открыть тег img
установить для src значение = URL в документе xml (см. ниже)
закрыть тег img
закрыть LI
открыть LI
открыть тег img
установить для src значение = URL в документе xml (см. ниже)
закрыть тег img
закрыть LI
закрыть UL

Он создает новый элемент списка и помещает внутри него тег img для каждого отдельного тега в документе xml.
А вот XML, но с большим количеством записей:

<images><image><url>0.jpg</url></image><image><url>1.jpg</url></image></images>

и фрагмент моей функции, которая имеет дело с изображением src,

for (i=0;i<x.length;i++)
      {
      txt=txt + "<li>";
      xx=x[i].getElementsByTagName("url");
        {
        try
          {txt=txt + "<img class='fade' src='" + xx[0].firstChild.nodeValue + "' />";
    }
        catch (er)
          {txt=txt + "<li class='fade'><img src='images/ajax-loader.gif' /></li>";}
        }
  txt=txt + "</li>";
      }

Мой вопрос: как мне сделать так, чтобы они исчезали после загрузки? и как мне добавить загрузку .gif? Я думал о похожей функции, которая записывает теги изображений с loading.gif в качестве src, а затем в приведенной выше функции получает каждый элемент по идентификатору и изменяет src. собираюсь попробовать, любые другие решения приветствуются. Но в основном мне нужно решить, как избавиться от этого плохого мальчика.

спасибо


xml jquery ajax getelementbyid
person Adam    schedule 29.07.2010    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Добавьте изображения с помощью:

 style="display:none;"

И затем, когда ваша функция завершает добавление изображений, вызовите jquery fade:

 $('img').fadeIn('slow');
person aviv    schedule 29.07.2010

arrow_upward
0
arrow_downward

Как говорит Авив, вы должны сначала установить display: none, потому что .fadeIn анимирует непрозрачность изображения из его текущего состояния до 100%.

А что с загрузкой.gif.

есть много способов, которыми вы можете пойти, например, сначала вы можете установить src каждого изображения на loading.gif, а затем, после запроса ajax, вы измените src на свое изображение. в этом случае вы должны установить display: none перед изменением каждого src.

Или у вас могут быть другие элементы img (например, в качестве загрузок) с абсолютной позицией. В этом случае вы должны изменить их стиль на display: none после запроса ajax.

удачного кодирования ;)

person Simon    schedule 29.07.2010

arrow_upward
0
arrow_downward 

   *Upate*

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

Проблема, с которой я не могу справиться, заключается в следующем:
Чтобы иметь возможность затухать изображение поверх loading.gif, gif должен быть bg-изображением.
Чтобы загрузить изображения, необходим запрос ajax. и изображения загружаются на страницу только после того, как они успешно загружены через ajax.
Мне нужно, чтобы файл loading.gif загружался вместе со страницей, а это значит, что я должен настроить пустую структуру из 100 LI на странице.
> Затем я могу использовать .html(), чтобы вставить <img src=[url from xml file] /> в LI.. да? Но проблема, с которой я сталкиваюсь, заключается в том, что страница зависает, пока она это делает, и загружает все изображения сразу, а не по одному.

Поэтому я подумал, создать функцию, которую каждый img может запускать при загрузке, которая запускает скрипт ajax для загрузки следующего изображения.
Я не думаю, что это здорово. И у меня проблема с написанием функции.
Теория такова:

image0 загружается и появляется,
image0 завершает загрузку и активирует loadNext()
В loadnext() : идентификатор увеличивается (это атрибут в xml, начинающийся с 0 до 100)
получает URL (который является элементом в xml), относящийся к новому идентификатору
, добавьте в неупорядоченный список и запустите loadNext() при загрузке изображения 1.

Я не могу заставить его работать :( помогите пожалуйста

person Adam Tomat    schedule 29.07.2010

arrow_upward
0
arrow_downward

Патчи не будут работать на drupal, однако модуль cdn работает с pressflow.

Попробуй это:

themname_template_preprocess_page(){
    //regular expression for CDN call
}
person bob    schedule 21.02.2013