jQuery按順序加載內容

我目前正在嘗試弄清楚如何在長頁面網站上加載/預加載大量內容。jQuery按順序加載內容

我想到的解決方案是在加載前一部分之後加載內容。

的HTML設置是這樣的：

<div class="panel">Panel 1</div> 
<div class="panel">Panel 2</div> 
<div class="panel">Panel 3</div> 
<div class="panel">Panel 4</div>

有沒有一種方式來加載面板1，那麼一旦已加載，加載面板2，依此類推......

對於大多數的解決方案我我們已經看過，他們建議使用jQuery中的.load（）方法通過外部文件加載內容。

如果任何人有任何意見和/或示例或示例代碼會驚人。

來源

2013-02-01 Jason Mayo

如果你真的想單獨加載它，那正是jQuery的load的用途。例如，假設你把這些元素data-page屬性，告訴他們每個人應該有什麼內容：

<div class="panel" data-page="page1.html">Panel 1</div> 
<div class="panel" data-page="page2.html">Panel 2</div> 
<div class="panel" data-page="page3.html">Panel 3</div> 
<div class="panel" data-page="page4.html">Panel 4</div>

（你不有要做到這一點，它只是一種方法，你不妨告訴他們。）

然後加載它們按順序（如果你真的希望它是連續的）是相當直接：

// Assumes script is at the bottom of the page, just before </body> 
(function() { 
    var index = 0, 
     panels = $(".panel"); 

    triggerLoad(); 

    function triggerLoad() { 
    var panel; 

    if (index <= panels.length) { 
     panel = $(panels[index]); 
     ++index; 
     panel.load(panel.attr("data-page"), triggerLoad); 
    } 
    } 
})();

即通過觸發第一小組的工作負載時，頁面首先rendere d，然後使用先前的load調用的完成處理程序觸發後面的每個面板加載。

Live Example | Source

在下面的註釋中，您討論了等待圖像等，以及完成以及。缺少body元素的主要onload，你得到的窗口，我們必須檢查不完整的圖像（HTMLImageElement有一個complete屬性）並掛鉤其負載事件。當沒有更多的不完整的圖像，我們加載下一個面板：

(function() { 
    var index = 0, 
     panels = $(".panel"); 

    nextPanel(); 

    function nextPanel() { 
    var panel, imgs; 

    display("Checking for panel #" + index); 
    panel = panels[index++]; 
    if (panel) { 
     panel = $(panel); 
     display("Loading panel"); 
     panel.load(panel.attr("data-page"), panelLoaded); 
    } 

    function panelLoaded() { 
     display("Panel loaded"); 
     imgs = panel.find('img'); 
     imgs.on('load', nextPanelWhenReady); 
     nextPanelWhenReady(); 
    } 

    function nextPanelWhenReady() { 
     var incomplete = imgs.filter(onlyIncomplete); 
     if (incomplete.length === 0) { 
     display("No pending images, loading next panel"); 
     imgs.off('load'); 
     nextPanel(); 
     } 
     else { 
     display("Images left to load: " + incomplete.length); 
     } 
    } 

    function onlyIncomplete() { 
     return !this.complete; 
    } 
    } 

    function display(msg) { 
    $("<p>").html(String(msg)).appendTo(document.body); 
    } 
})();

Live Example | Source

這隻能處理圖像，但你應該能夠概括爲視頻的概念以及（我還沒有處理video標籤，我不知道你使用它們而不是Flash視頻等我還沒有處理的 —）。

來源

2013-02-01 19:04:25

感謝您的這一點，它似乎完美適用於基於文本的頁面。但是，如果我正在加載圖像，面板仍會一個接一個地加載，即使前面板中的圖像尚未加載...任何想法爲什麼會發生這種情況？ –

@JasonMayo：是的，圖像異步加載。您必須等待才能觸發下一輪，直到所有圖像加載完畢，這更加複雜一些，特別是處理競爭條件（例如，如果您在圖像上掛載了「加載」事件，您確定它沒有加載' t已經被解僱了？）。所以你可能需要解析結果，找到圖像，鉤住'load'事件，*然後*將解析的DOM片段附加到相關的面板，然後等待所有'load'事件發生火災... –

好吧，你現在已經完全迷失了我...... :) 有沒有網上有任何例子可以想到解釋這個？我完全理解你以前的代碼如何工作，但我猜這隻適用於文本/標記？不是視頻和圖像？ –

-1

你可以去與each。假設您的設置是決賽：

$('.panel').each(function(){ 
    var panelname = $(this).innerHTML; 
    var result = $.ajax({ 
    url: <URL>, 
    async: false, 
    data: panelname 
    }); 
    $(this).html(result.responseText); 
});

或周圍的想法，但你一定有辦法的面板之間不同的加載正確的一個。該解決方案應該適用於任何數量的面板。

來源

2013-02-01 19:06:10 kms

沒有理由（也沒有理由:-)）在這裏使用'async：false'。您也可以將所有內容轉儲到頁面中。使用'async：false'會凍結瀏覽器，直到所有請求都完成。它現在也會隨時消失（jQuery正在放棄它）。 –

jQuery按順序加載內容

回答

相關問題