2

嗨，这是我关于 stackoverflow 的第一个问题，我希望它可以帮助我解决我的问题。

我在这样的用户控件上有一个空的 div 部分：

<div id="attachmentlist"></div>

这个 div 的内容将加载到这个函数中名为 bindattachment() 的 javascript 函数中我使用了一些 jquery 函数来设置 html 并将其设置为这样的 div 内容

jQuery("#attachmentlist").html(somegeneratedhtml);

它工作正常，但生成“somegeneratedhtml”需要太长时间，我希望在 div 内容设置为此生成的 html 之前，类似“正在加载请稍候......”的文本显示在同一个 div 中。所以我在使用“somegeneratedhtml”设置div之前使用相同的代码来设置html，就像这样

jQuery("#attachmentlist").html('<p>loading please wait ...');

所以 bindattachment() 看起来像这样

function bindattachment()
{
   jQuery("#attachmentlist").html('<p>loading please wait ...</p>');
   var html;
   html = "somegeneratedhtml";
   jQuery("#attachmentlist").html(html);
}

我得到的是 div 上的附件链接列表，但“正在加载请稍候......”从未显示。

我想直到 html 在 bindattachment 上生成“正在加载请稍候...”短语显示在 div

4

5 回答 5

4

在 JS 执行上下文期间，UI 通常仅在 JS 完成后更新。因此，调用

jQuery("#attachmentlist").html('<p>Loading, please wait ...</p>');
// long loop here
jQuery("#attachmentlist").html('<p>Finished</p>');

意味着对 DOM 的第一次更新（调用.html）将被忽略，因为 UI 线程在 JS 完成之前永远不会运行。你可以在 JS 中做一些会触发布局的事情，但这并不意味着 UI 会真正更新。

如果您想确保显示第一条消息，您应该更新它，然后运行您的代码以异步生成 HTML。例如，

var div = $('#attachmentlist');
// This will never display because the HTML is overwritten before the UI thread
// runs
div.html('<p>First call to set html, will not display');
// This will display because there are no other synchronous calls to update the same
// DOM elemements
div.html("second call to set html, this displays");
// The function passed to setTimeout runs after the UI has had a chance to update
setTimeout(function() {
    // Long running script
    var html = "";
    for (var i=0; i < 100000; i ++) {
        html+= "testing...<br/>";
    }
    // By updating the HTML with a timeout, the previous call to $.html
    // will be visible on the screen for a minimum amount of time
    div.html(html);
}, 1);

长时间运行脚本的注意事项

注意，如果用JS生成HTML耗时较长，可能会锁死浏览器，需要使用Web Workers异步生成HTML，即不会因为JS正常运行而锁死UI JS线程会。

于 2013-05-01T20:14:00.103 回答
0

在 jQuery 中你必须使用

jQuery("#attachmentlist").html('<p>loading please wait ...</p>');

将您的文本添加到带有 id 附件列表的 div 中。

好的，你已经更正了：）

于 2013-05-01T20:04:46.047 回答
0

我很惊讶它需要这么长时间才能加载，但我猜正在发生的事情正在加载，请稍候很快被替换为jQuery("attachmentlist").html(somegeneratedhtml);. 我要做的是div在附件列表中创建两个 s。让一个包含加载消息，另一个将用于生成的 html。使用.hide()和.show()选择显示的内容。

于 2013-05-01T20:07:51.743 回答
0

我用你的代码创建了一个jsfiddle 。我添加了一个简单的$(document).ready()函数来运行该函数。

$(document).ready(function() {
   bindattachment(); 
});

function bindattachment()
{
   jQuery("#attachmentlist").html('<p>loading please wait ...</p>');
   var html;
   html = "somegeneratedhtml";
   jQuery("#attachmentlist").html(html);
}

显示div正确的“somegeneratedhtml”。

查看生成“somegeneratedhtml”的内容会很有帮助。该错误可能发生在该函数中。

于 2013-05-01T20:10:45.193 回答
-1

花费的时间不是更改 div 内的 html，而是呈现您的 html。

于 2013-05-01T20:11:24.757 回答