jQuery / javaScript: изображения не загружаются

Question

У меня есть следующий код:

all_images = new Array(Array);
$.get('../dotclear-files/themes/biblio/js/dynamic_ajax_php.php', function(data) {
    var w = 0;
    $(data).find('image').each(function() {
        if (!all_images[w]) all_images[w] = new Array();
        all_images[w]['url'] = $(this).find('url').text() + '#comments';
        all_images[w]['src'] = $(this).find('src').text();
        all_images[w]['title'] = $(this).find('title').text();
        all_images[w]['width'] = $(this).find('width').text();
        all_images[w]['height'] = $(this).find('height').text();
        w = w + 1;
    });
    $("#carousel-comments").append('<ul></ul>');
    for (x=0; x<3; x++) {
        $('#carousel-comments ul')
            .append('<li>')
            .append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
            .append('<img alt="' + all_images[x]['title'] + '" class="jcarousel-img jcarousel-img-' + x + '" width="' + all_images[x]['width'] + 'px" height="' + all_images[x]['width'] +'px" />')
            .append('</a>')
            .append('</li>');
        var img = new Image();
        $(img)
            .load(function() {
                $('.jcarousel-img-' + x)
                    .attr({'src': all_images[x]['src'], 'alt': all_images[x]['title']})
                    .fadeIn();
                })
            .attr('src', all_images[x]['src']);
    }
    $('#carousel-comments').jcarousel('reload');
}, 'xml');

Первая часть этого кода загружает изображения из сценария PHP, который возвращает файл XML. Эта часть отлично работает.

Проблема связана со 2-й частью: $(img).load(...) Она никогда не отображает мои изображения.

Это можно увидеть на моей тестовой странице : это третья карусель под названием "C'est vous qui le dites!" Мы видим, что заголовки изображений отображаются ... но сами изображения не загружаются.

Что я делаю не так?

Спасибо за любую помощь!

Answer 1

Я думаю, вы должны добавить <img> к карусели.

$(img).appendTo($("#carousel-comments"));

Или как то так.

Редактировать после обмена комментариями:

Элемент <IMG> в вашем LI не совпадает с вашим var img = new Image. Затем попробуйте что-то вроде этого:

for (x=0; x<3; x++) {
    var img = new Image();
    img.load(function() {
        $(this).fadeIn();

        // Also, set your carousel here        
    });

    img.attr('alt', all_images[x]['title'])
        .attr('width', all_images[x]['width'])
        .attr('height', all_images[x]['height'])
        .addClass('jcarousel-img jcarousel-img-' + x)
        .attr('src', all_images[x]['src']);

    $('#carousel-comments ul')
        .append('li')
        .append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
        .append(img);
}