1

单击时，我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');

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

很明显，这两种选择都有一些缺点。我希望可能有其他我不知道的解决方法？

4

3 回答 3

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();
 });
});
于 2013-04-12T13:00:34.210 回答
1

听起来您只需要在开始 AJAX 调用之前擦除弹出 div 的内容（并可能在其中放入“正在加载...”消息）。

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

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

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

于 2013-04-12T12:59:57.133 回答
1

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

$.get('somepage.php', function(data) {
   $('div#popup').html(data).appendTo('body');
});
于 2013-04-12T12:57:25.820 回答