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()或 asetTimeout()将是最佳选择，因为加载图片可能需要更少的时间。

Answer 1

尝试.load()像这样使用-

success: function(result) {
        $('.leftPicture img').attr('src', "[...]").load(function(){
           $('.leftPicture').show(0); // wait until image is loaded
        })
    }