JQueryプリロードイメージのdiv - animation choppyを表示

Question

私は、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を添付し、画像をプリロードします。これは、すべての画像の小さなサムネイル、および大きなプレビュー画像をプリロードします。

アニメーションは、特に単一の画像ではアニメーションが最初は遅いアニメーションを行い、その後は本当に速くアニメーションを終了させます。私はそれを一定の割合でスムーズにslideDownしたい。

あなたはhttp://www.randykrohn.com/classifieds/allAds.php?searchKey=AllAds

おかげでページを見ることができます！

Answer 1

loadImagesプラグインを正しく使用していないようです。あなたは "loadImages"の呼び出しの後、イメージが読み込まれると仮定しています。これは必ずしも当てはまるわけではありません。あなたのサイトを見て、初めて「非常にかすかな」ボタンを押すと「すべての画像を表示」ボタンを押すと、その理由があります。それ以降は、スムーズです。また、サムネイルを最初にクリックすると、現在の詳細画像の次の画像への遷移が本当に悪くなりますが、その後のクリックは問題ありません。

イメージは、「コールバック」ルーチンが呼び出されたときにのみ完全に読み込まれます。

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

それは、おそらく呼び出されているので、これは、最初の時間をぎくしゃくされますので、私のような何かがそれらをアニメーション化し、あなたのコードが書かれている方法と同様の方法でそれを呼び出すん機能processImages()を持っている場合イメージが読み込まれる前にしたがって、それを呼び出している間：

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

はいいこととイメージがロードされたときに「processImagesが（）」のみと呼ばれるので、毎回スムーズになります。

Answer 2

私はあなたのコメントが何を意味するかわからないんだけど、起動するコード書き換えてみてください：

：この（私は視覚的にそれをチェックしましたが、私は何かを見逃している場合があります）などの

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

つまり、loadImagesを1回呼び出すだけでイメージをロードし、コールバック関数で隠れてスライドさせます。