1

私はやろうとしている簡単な仕事をしています。一連のサムネイルとメイン画像があります。

http://activate5.info/index.php#portfolio

サムネイルをクリックしたら、新しい画像とテキスト情報を返す配列を検索するために ajax 呼び出しを行う必要があります。次に、メイン画像をフェード アウトし、ajax 呼び出しからの新しい情報に置き換える必要があります。

それは機能していますが、ぎくしゃくしています。何が起こっているか (私が思うに) は、フェードアウトはスムーズですが、画像がページの新しいコンテンツであるためフェードインがぎくしゃくし、写真が通常ページに読み込まれるときのようにぎくしゃくして表示されます。

スムーズにしたいので、理想的には、画像をフェードインする前に、画像が完全に読み込まれたときに何らかのアラート/トリガーが必要です。それは簡単な答えだと確信していますが、助けていただければ幸いです。

私はajax呼び出しの「成功」部分にフェードアウト/フェードインのものを入れました...

$.ajax({
 url: 'resources/portfolio/ajax_portfolio_data.php',
 data: { client: clientCode,
          slide: slideNumber
       },
 success: function(data) {
      $('#slide'+slideNumber+'_portfolio').fadeOut('slow',function(){
         $('#slide'+slideNumber+'_portfolio').html($.parseJSON(data));
         $('#slide'+slideNumber+'_portfolio').fadeIn('slow');
      }); 
  }
});

利用可能なすべての画像をプリロードしたくありません。すでに大きなページの速度がさらに低下するためです。これを行うためのより良い方法はありますか?

(データ) の PHP ファイルによって返されるものの例は次のとおりです。

$html = "<div class='slideMainImage'><img src='" 
   . $portfolio[$slide][$client]['image'] . "' /></div>";
$html .= "<p>" . $portfolio[$slide][$client]['text'] . "</p>";
echo json_encode($html);

前もって感謝します。

4

1 に答える 1

1

ajax に画像を追加し、それを非表示にして、 onload イベント ハンドラーsuccessをアタッチすることができます。読み込まれると、現在 で実行されているコードを実行します。success

その方が効果はよりスムーズになる可能性がありますが、画像が完全にロードされたときにのみ効果が開始されるため、全体的なプロセスは遅くなることに注意してください。

于 2012-12-13T00:04:50.527 に答える