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

Question

Я загружаю документ 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>";
      }

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

спасибо

Answer 1

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

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

themname_template_preprocess_page(){
    //regular expression for CDN call
}

Answer 2

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

А как насчет loading.gif.

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

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

счастливое кодирование;)

Answer 3

---

   *Upate*

---

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

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

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

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

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

Answer 4

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

 style="display:none;"

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

 $('img').fadeIn('slow');