Ajax 在呈现之前完全下载内容

有没有一种方法可以仅在内容完全下载后使用AJAX/get/load with jQuery呈现内容

目前，加载程序在下载“html”时显示，但一旦下载完成，就会开始呈现。html中有很多图像，因此它们在渲染后开始独立加载

这是好的设计实践吗？在我看来，一旦加载程序消失，所有内容都应该100%渲染，但这当然会增加加载时间

我能做到这一点没有任何'黑客'

$(document).ready(function() {

    $('#clicks').click(function(){

        $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

        $.get("moreProjects.html", function(datas){
            $('#portfolio').append(datas);
        }, 'html').complete(function() { 
            $('#loader').hide();
        });

        return false;

    });

});

$（文档）.ready（函数（）{
$（'#clicks'）。单击（函数（）{
$（“#投资组合”）。追加（“”）；
$.get（“moreProjects.html”，函数（数据）{
$（“#投资组合”）。追加（数据）；
}，html'）。完成（函数（）{
$（“#加载程序”）.hide（）；
});
返回false；
});
});

您可以始终将返回的数据存储在变量中，然后将其附加到

完成

函数中：

var returnedData;
$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

    $.get("moreProjects.html", function(datas){
        returnedData = datas;
    }, 'html').complete(function() { 
        $('#portfolio').append(returnedData);
        $('#loader').hide();
    });

    return false;

});

var返回数据；
$（'#clicks'）。单击（函数（）{
$（“#投资组合”）。追加（“”）；
$.get（“moreProjects.html”，函数（数据）{
返回数据=数据；
}，html'）。完成（函数（）{
$（“#投资组合”）.append（returnedData）；
$（“#加载程序”）.hide（）；
});
返回false；
});

另一种选择是使用隐藏的div容器加载内容，然后在完成时显示：

$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    $('#portfolio').append("<div id='content' style='display:none'></div>");

    $.get("moreProjects.html", function(datas){
        $('#portfolio #content').append(datas);
    }, 'html').complete(function() { 
        $('#portfolio #content').show();
        $('#loader').hide();
    });

    return false;

});

$（'clicks'）。单击（函数（）{
$（“#投资组合”）。追加（“”）；
$（“#投资组合”）。追加（“”）；
$.get（“moreProjects.html”，函数（数据）{
$（“#公文包#内容”）.append（数据）；
}，html'）。完成（函数（）{
$（“#公文包#内容”）.show（）；
$（“#加载程序”）.hide（）；
});
返回false；
});

检查此链接，最后一篇文章：

在我看来，你要做的是把html保存在一个变量中， 然后过滤掉所有img标签并将其传递给

\u loadimages

功能 在本文中，我将为您设置完整的回调

大概是这样的：

var $retData = $(datas);
var $imgs = $retData.find('img');
_loadimages($imgs,function(){
   $('#portfolio #content').append($retData);
});

---

获取HTML，将其放置在页面上或使用JS预加载，如果将其放置在页面上，则如果要加载图像，则无法隐藏图像，但可以将其放置在屏幕上。 加载图像后，将HTML移动到您的公文包元素

下面的代码只是一个示例，没有经过测试，我想加载函数可能会在加载的第一个图像上启动？ 如果是这样的话，您将不得不对图像进行计数，在每个图像上放置一个加载函数，然后在加载所有图像后显示HTML，或者您可以尝试将加载函数附加到HTML中的最后一个图像，但不能保证标记中的最后一个图像也是最后一个加载的图像，但通常是这样

如果浏览器缓存了图像，那么加载也可能会出现问题，如果是这样，您需要找到另一个解决方案，或者在$.ajax中打开缓存

$('#clicks').on('click', function(){
    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    var jqxhr = $.ajax({
        type:'GET',
        url: 'moreProjects.html',
        datatype: 'html',
        done: function(datas) {
            $('<div id="somediv"></div>').append(datas)
                                         .css({position: 'fixed', left: -5000})
                                         .appendTo('body');
        }
     });
     jqxhr.always(function() {
        $('img', '#somediv').on('load', function() {
            $('#loader').remove();
            $('#portfolio').append($('#somediv').contents());
        });
     });
     return false;
});

$（'clicks'）。在（'click'，函数（）上{
$（“#投资组合”）。追加（“”）；
var jqxhr=$.ajax({
类型：'GET'，
url:'moreProjects.html'，
数据类型：“html”，
完成：功能（数据）{
$（''）。附加（数据）
.css（{位置：'fixed'，left:-5000}）
.附于（“主体”）；
}
});
jqxhr.always（函数（）{
$（'img'，'somediv'）。on（'load'，function（）{
$（“#加载程序”）.remove（）；
$（'#公文包'）.append（$（'#somediv'）.contents（））；
});
});
返回false；
});

感谢您提供的解决方案，我刚刚通过限制我的连接来测试了第一个解决方案[在快速连接上无法判断]。第一个解决方案的作用方式相同，之后仍然加载图像。在加载HTML后调用complete，我假设。因此，这将始终导致独立加载图像