如何使用JQuery / Javascript / HTML限制瀏覽器一次顯示完整的頁面數據

Question

我有一個JSP頁面，其中包含三個部分的頁眉，正文和頁腳。 我在運行時使用JQuery語法使用jsp加載頁眉和頁腳節，正文部分包含一些顯示的圖像/數據。

現在我面臨的問題是，在瀏覽器中運行應用程序時，標題頁包含了許多圖像，這些圖像是從某些位置觸發的，因為當我在瀏覽器中打開此頁面時，第一個正文部分會被分解，然后標題加載中的內容。 這不是我期望的，因為我希望一次顯示所有頁面。

我想一次顯示所有部分。 有沒有辦法告訴瀏覽器使用Javascript / JQuery一次顯示內容。 我嘗試在JQuery中使用document.ready以及在javascript中使用window.load 。 他們都沒有工作。

我正在加載頁眉/頁腳jsp，如下所示：

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

問題：如何確保瀏覽器一次顯示所有頁面，而不是緩慢顯示每個部分。 簡而言之，我認為瀏覽器可以按自上而下的方式加載網頁。 因此，當瀏覽器看到標簽要加載header.jsp時，應先加載標頭頁面，然后再移至主體，再移至頁腳，但在我的情況下，它首先加載主體，因為其內容較少，然后緩慢加載標頭。

請讓我知道是否需要更多詳細信息，並為我提供有關此問題的任何解決方案。

Answer 1

試試看（將URL替換為您的頁眉和頁腳的URL）：

$.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) {

    }
   });
}