Jquery预加载图像，然后显示div-动画起伏

我有一个页面，我通过Ajax调用获取分类广告的详细图像，然后预加载图像，将它们添加到div支架，然后显示div。出于某种原因，动画真的很不稳定？有什么想法吗

代码如下：

$(".showPixFeature.hidden").live('click', function () { 
    var adID = this.id.split('_');
    $("#" + adID[0] + '_' + adID[1]);
    $.ajax({
    type: "POST",
    url: "../classifieds/classAdPics.php",
    data: "ID="+ this.id,
    success: function(r) {
        var images = r.split('~');
        var thumbs = '';
        var thumbImages = '';

        $.loadImages('../images/35.gif', function() {$('<img />').attr({
            src:'../images/35.gif',
            id:'loader'
        })
        .appendTo("#" + adID[0] + '_' + adID[1]);

        $('#loader').remove();
    });

    var i=0;
    if(((images.length) - 1) > 1){
        for (i=1;i<=(images.length) - 1;i++)
            {
            thumbs = thumbs + '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">';
                thumbImages = thumbImages + '"../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg", ';
                $.loadImages('../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg', function() {

                });
            }
        }
        thumbs = thumbs + '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>';
        $.loadImages('../images/listings/' + adID[1] + '_1_.jpg', function() {
    });


    $("#" + adID[0] + '_' + adID[1]).html(thumbs).hide();

    $("#" + adID[0] + '_' + adID[1]).slideDown('slow');
    }
});
$(this).attr("src", "../images/close_pix.png");
$(this).removeClass('hidden').addClass('shown');
});

Ajax调用根据它为该广告找到的图像数量产生类似于~1~2~3的结果。然后我解析并将AdID附加到它，然后预加载图像。它预加载所有图片的小缩略图和大预览图像

动画所做的是，尤其是在单个图像上，它首先会做缓慢的动画，然后很快关闭动画。我希望它以一致的速度平稳地向下滑动

你可以在网站上看到这一页

---

谢谢

在我看来，您没有正确使用loadImages插件。您假设在调用loadImages之后，图像将被加载。这不一定是事实，这就是为什么当我在你的网站上第一次点击“显示所有图片”按钮时，它会非常不稳定。而且，当我第一次单击缩略图时，当前详细图像到下一个图像的过渡非常糟糕，而随后的单击则很好

只有在调用回调例程时，才会完全加载映像。因此，如果我有一个函数processImages，它可以制作动画，并以类似于编写代码的方式调用它：

$.loadImages(['image1.jpg', 'image2.jpg'], function(){});
processImages();

这将是第一次不稳定，因为它可能在加载图像之前被调用。虽然这样称呼它：

$.loadImages(['image1.jpg', 'image2.jpg'], function(){processImages();});

---

每次都会非常顺利，因为只有在加载图像时才会调用processImages。

我不确定您的评论是什么意思，但请尝试重写开始的代码：

    if(((images.length) - 1) > 1){ 

像这样，我已经目视检查过了，但我可能遗漏了一些东西：

    if ((images.length > 2) {
        for (i = 1; i < images.length; i++) {
            thumbs      += '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">';
            thumbImages += thumbImages + '"../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg", ';
            toBeLoaded[i-1] = '../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg';
        }
    }
    thumbs += '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>';
    toBeLoaded[i-1] = '../images/listings/' + adID[1] + '_1_.jpg';
    $.loadImages(toBeLoaded, function(){
        $("#" + adID[0] + '_' + adID[1]).html(thumbs).hide();
        $("#" + adID[0] + '_' + adID[1]).slideDown('slow');
    });

---

i、 e.在对loadImages的一次调用中加载图像，并在回调函数中进行隐藏和滑动。

我不知道它为什么这样做。我直接从页面的源代码复制和粘贴，当我在编辑器中查看它时，它是正确的。不知道为什么会这样。您对拆分进行了更正，但实际上它确实将ajax响应拆分为~，这样它只会提取数字。更正，第一个拆分现在就在您的更正中，它应该拆分为_。复制和粘贴问题我必须将其格式化为字符串吗？它不适用于变量。基本上，我只是声明将其作为新数组；它对于有多个图像的广告非常有效，但是如果广告只有一个图像，它就不会打开任何东西。嗨，我不太明白为什么你会有代码if images.length-1>1{。这表示如果有3个或更多图像。我认为应该是如果images.length>1，即如果有2个或更多图像。尝试一下，并让我知道它是否解决了问题。