jquery - アクションの前に複数の HTML 変更を待機しています

Question

基本的に、データベースに変更を加えて表示する新しい画像を取得する ajax 呼び出しがあります。ロードが完了するまで写真を表示しないようにしています。

$('.leftPicture').hide(0);
$('.rightPicture').hide(0);

varData = [...];
$.ajax({
   type: "POST",
    url: "ajax/save.php",
    data: varData,
    dataType: 'json',
    cache: false,
    success: function(result) {
        $('.leftPicture').attr('id', result[0]);
        $('.leftPicture img').attr('src', "[...]");
        $('.rightPicture').attr('id', result[1]);
        $('.rightPicture img').attr('src', "[...]");

        $('.leftPicture').show(0);
        $('.rightPicture').show(0);
    }
});

残念ながら、(ブラウザによっては) 新しい画像が表示される直前に古い画像が再度表示されることがあります。どうすればこれを修正して、「きびきび」に見せることができますか? 画像の読み込みに時間がかかる可能性があるため、 adelay()または aを使用するのが最善の選択だとは思いません。setTimeout()