jquery - 处理 "Wait, Load, and then Show"内容的更好方法

Question

我有一个在点击时通过 $.load() 方法填充的 div 。然后，我将此 div 作为弹出窗口附加到 body 上(有点像模态弹出窗口)。每次单击时，div 的内容都会更改。

问题

整个填充机制恰好需要大约 1.5 到 2 秒。我只要点击一次就没有问题。但是，如果我再次单击，div 会弹出旧内容，然后在接下来的 500 毫秒左右加载新内容。因此用户可以同时看到我想避免的旧内容和新内容。

我尝试过的

(1) 首先想到的是使用 setTimeout() 函数在 2 秒后运行。

$('div#temp').load('somepage.php');
setTimeout(function(){
   html = $('div#temp').html();
}, 2000);
$('div#popup').html(html).appendTo('body');

这可以工作，但不可靠。不保证新内容会在 2 秒内加载。也可能需要 3 秒或更长时间。对超过 2 秒的值进行硬编码也不好，因为它看起来像是永恒的。

(2) 我尝试的下一件事是通过使用以下内容来使用 while 循环:

var html = '';
$('div#temp').load('somepage.php');
html = $('div#temp').html();
while(html == '')
{
  html = $('div#temp').html();
}
$('div#popup').html(html).appendTo('body');

最终，这可行，但由于某种原因，它在弹出 div 之前使浏览器挂起 8-10 秒

很明显，这两种替代方案都有一些缺点。我希望可能有其他我不知道的方法来解决这个问题？

Answer 1

您是否尝试过使用 $.load 的完整回调？
.load( url [, data ] [,complete(responseText, textStatus, XMLHttpRequest) ] )

$('div#temp').load('somepage.php',function(responseText){
     $('div#popup').html(responseText).appendTo('body');
 });

如果旧内容仍然在新内容之前显示，您可以先隐藏旧内容。那么你就不需要一个临时 div 来存储数据。

$('div#popup').fadeOut(function(){
     $('div#popup').load('somepage.php',function(){
     $(this).fadeIn();
 });
});