使用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);
}

如何在列表中注入项目后获得正确的总数？