Get the total of items after using appendTo

Question

My HTML looks like this :

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

Using jQuery, i'm preloading and injecting more <li> elements into the ul, like so:

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) {
        });
}

So far so good. Here's my problem. When calling the function SlideShow, to get the number of slides (to use later in a loop), i always get 1. I'm injecting 12 <li> items but i always get 1.

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

        alert(totalSlides);
}

How do i get the right total after injecting items in a list?