Jquery preload images then show div - animation choppy

I have a page that I get the detail images for a classified ad via an Ajax call, then preload the images, add them to the div holder, then show() the div. For some reason, the animation is really choppy? Any ideas?

Here's the code:

$(".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] 开发者_如何学Go+ '_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');
});

The Ajax call yields something like this "~1~2~3" depending on how many images it finds for that ad. Then I parse through and attach the AdID to it, and preload the image. It preloads a small thumbnail for all of the pictures, and a large preview image.

What the animation does is, especially on ones that are single images is it will do the slow animation at first and then really fast to close the animation. I want it to slideDown smoothly at a consistent rate.

You can see the page at http://www.randykrohn.com/classifieds/allAds.php?searchKey=AllAds

Thanks!

I'm not sure what your comments mean, but try rewriting the code that starts:

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

like this (I've visually checked it, but I may have missed something):

    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. load the images in a single call to loadImages and do the hiding and sliding in the callback function.

It seems to me that you are not using the loadImages plug-in correctly. You are assuming that after the call to "loadImages", the images will be loaded. This won't necessarily be the case, which is why when I look at your site and hit the "show all pictures" button the first time it's very jerky. When I do it subsequent times it's smooth.Also, when I click the thumbnails the first time the transition of the current detailed image to the next is really bad, while subsequent clicks are fine.

The images will only be completely loaded when the "callback" routine is called. So, if I have a function processImages() that does something like animate them and call it in a way similar to how your code is written:

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

This will be jerky the first time, since it is then probably being called before the images are loaded. While calling it thus:

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

will be nice and smooth every time, since "processImages()" will only be called when the images are loaded.