如何使用JQuery/Javascript/HTML限制浏览器一次显示完整的页面数据

我有一个JSP页面，它包含三个部分：页眉、正文和页脚。我在运行时使用JQuery语法加载带有jsp的页眉和页脚部分，而body部分包含一些显示的图像/数据

现在我面临的问题是，当在浏览器中运行应用程序时，标题页包含了太多从某些位置触发的图像，这是因为当我在浏览器中打开此页时，第一个正文部分被刷新，然后加载标题内容。这不是我所期望的，因为我希望所有页面同时显示

我想一次显示所有部分。是否有任何方法可以告诉浏览器使用Javascript/JQuery立即显示内容。我尝试在JQuery中使用

document.ready

，在javascript中使用

window.load

。他们都没有工作

我正在加载页眉/页脚jsp，如下所示：

jQuery("#header").load('header.jsp');
jQuery("#footer").load('footer.jsp');

问题：如何确保浏览器一次显示所有页面，而不是缓慢地显示每个部分。 简单地说，我觉得浏览器可以用自上而下的方式加载网页。因此，当浏览器看到要加载header.jsp的标记时，它应该首先加载页眉页面，然后再移动到正文，然后再移动到页脚。但在我的例子中，它首先加载正文，因为它的内容较少，然后缓慢加载页眉

如果您需要更多详细信息，请告诉我，并为我提供解决此问题的任何解决方案。

尝试此方法（将url替换为指向页眉和页脚的url）：

---

Google“在html中预加载图像”使用一个覆盖div，您可以在window.load.Added问题声明中删除该覆盖div。

$.ajax({
    type : "GET",
    url : "url to header.jsp",
    success : function(response) {
           var headerHtml = response;
           getFooter(headerHtml );
    },
    error : function(e) {
    }
});

function getFooter(headerHtml){
    $.ajax({
    type : "GET",
    url : "url to footer.jsp",
    success : function(response) {
                $("#header").html(headerHtml);
                $("#footer").html(response);
        },
    error : function(e) {

    }
   });
}