Question

我点击后通过div方法填充$.load()。然后我将此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();
 });
});

Answer 2

我建议您在加载内容后仅弹出div ：

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

Answer 3

听起来你只需要在开始AJAX调用之前擦除popup div的内容（并且可能在其中添加“loading ...”消息）。

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

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

你永远不应该轮询DOM或以其他方式将JS解释器置于“忙碌循环”中 - 它会使浏览器无响应。

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

问题

我尝试了什么

3 个答案: