jquery 检索到的非常大的 HTML 内容的加载器答案

【问题标题】：loader for very large HTML content retrieved by jqueryjquery 检索到的非常大的 HTML 内容的加载器
【发布时间】：2012-02-09 06:22:52
【问题描述】：

我有一个由 Jquery 检索到的相当大的数据块。我在提交表单时将加载程序附加到 div，然后在返回数据时，将其替换为数据中的 html 标记。问题是当数据返回时，加载器消失，然后在浏览器渲染 html 以进行显示时，我得到一个空白 div 大约 4 秒。无论如何我可以让加载器一直停留到数据显示在浏览器中吗？

    $("#offerForm").submit(function() {  
    //show loader
             $('#demo').append('<div id="zloader" style="background: #fff url(\'preloader2.gif\') no-repeat scroll 10px center; 
padding-left: 40px;">Loading, please wait...</div>');

    //post the form
         $.post('getoffers.php', $("#offerForm").serialize() 
+ '&page=' + page, function(data) {

                       //show the returned data
               $('#demo').html(data.htmlOutput);
                   }
    }

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$.post('<url>', {<data>}, function (data) {
    $('#demo').append(data.htmlOutput).find('#zloader').remove();
});

这将追加新数据，然后删除加载器。

【讨论】：

【解决方案2】：

这样你就可以在加载整个 HTML 后删除加载器。让它工作起来可能有点棘手。

这基本上与浏览器“重绘”有关。作为一名 JavaScript 程序员，您无法控制重绘何时发生或不发生。

为避免冻结，您可以尝试使用setTimeout 一点一点地加载内容，让浏览器有时间重新绘制和解冻。

【讨论】：

谢谢大家的回答，Frits，有没有我可以参考的教程来实现你的解决方案？谢谢
我不知道，但应该不会很难写。 Jasper 的解决方案可能对您有用。

【解决方案3】：

您可以使用 ajax 方法来做到这一点。

$.ajax({
    url: 'get-offers.php',
    type: 'POST',
    beforeSend: function () {
        // append the loader
    },
    success: function( data ) {
        // show the returned data
    }
});

【讨论】：

.load 是水下的 AJAX 调用，所以这不会改变任何东西。

【解决方案4】：

如果您使用 html() 的本机实现，$.ajax，您可以访问回调以更改完成时加载内容的显示并删除您的加载器。

例如：

$.ajax{
...
success:function(){
    // Show new content
    // Hide loader
}}

【讨论】：