Получить общее количество предметов после использования appendTo

Question

Мой HTML выглядит так:

<ul class="slideShow">
    <li><img src="img/slides/white_album.jpg" width="300" height="250" alt="White album"></li>
</ul>

Используя jQuery, я предварительно загружаю и добавляю больше <li> элементы в ul, вот так:

var target = $(".slideShow");
var banners = [];
function set_preload_banners() {
        $.ajax({
            type: "get",
            url: "include/get_banners.php",
            dataType: "json"
        }).done(function(data) {
            if ( !(jQuery.isEmptyObject(data)) ) {
                $.each(data, function(i, item) {
                    banners[i] = new Image();
                    banners[i].src = 'img/slides/' + item[2];
                    banners[i].onload = function() {
                        var attr = $("<li></li>").appendTo(target);

                        $(this).width(this.width).height(this.height).attr("alt", "").appendTo(attr);
                    }
                });
            }

            SlideShow();

        }).fail(function(data) {
        }).always(function(data) {
        });
}

Все идет нормально. Вот моя проблема. При вызове функции SlideShow, чтобы получить количество слайдов (чтобы использовать позже в цикле), я всегда получаю 1. Я делаю инъекцию 12 <li> предметы, но я всегда получаю 1.

function SlideShow() {
        var slides = $(".slideShow>li");
        var totalSlides = slides.length;

        alert(totalSlides);
}

Как получить правильную сумму после добавления элементов в список?