ajax - jquery .get 在渲染之前完全下载内容

Question

是否有办法仅在使用 AJAX/get/load 和 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;

    });

});

Answer 1

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

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;

});

另一种选择是使用隐藏的 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;

});