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

不幸的是，有时候（取决于浏览器），旧图片会在新图片出现之前再次显示。我怎样才能解决这个问题并让它看起来“活泼”？我不相信使用delay()或setTimeout()是最佳选择，因为图片可能需要更少的时间来加载。

Answer 1

尝试使用此类.load() -

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

在行动之前等待多个HTML更改

1 个答案: