“等待，加载，然后显示”内容的更好方法

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

我建议你只在内容加载后才弹出div：

$.get('somepage.php', function(data) {
   $('div#popup').html(data).appendTo('body');
});

Answer 2

您尝试过使用$.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();
 });
});

Answer 3

听起来您只需要删除弹出div中的内容(并可能添加一个“正在加载...”消息)，然后再开始AJAX调用。

另外，使用.load的完成回调参数触发对DOM的后续更新。

$('#popup').html('loading...');
$.get('somepage.php', function(content) {
    $('#popup').html(content);
});

您永远不应该轮询DOM或以其他方式将JS解释器放入“忙循环”-这会使浏览器无响应。