jQuery - 動態加載內容，什麼是最有效的？

我想知道這件事情。我開始編寫一個網頁，我基本上都想要相同的設計。只有內容在改變。所以我不想加載整個新頁面，基本上相同的東西一遍又一遍地加載。我只想加載內容。jQuery - 動態加載內容，什麼是最有效的？

現在，我提出了兩種可能的解決方案。使用某種類型的jQuery內容滑塊。如果整個內容都很難理解，但我選擇只顯示我想要的部分。當點擊鏈接時，div內容的位置發生變化。

或者我有一個單獨的文件與大量的div的另一個解決方案。並且點擊鏈接基本上會清空div，並從另一個文件中加載所選div的內容。

什麼解決方案是最好的？總體思路和編程思路？我期望在這裏有相當多的PHP編程，我也想減少負載量，尤其是因爲最初的網站負載包含一些嚴重的圖像。

來源

2010-03-09 Kenny Bones

如果內容太多，預加載它對最終用戶來說確實很慢。我建議你在點擊鏈接時採用動態請求內容的第二種方法。

您可以通過劫持所有鏈接並進行ajax調用以獲取內容並將其注入相關容器，從而輕鬆簡化設計。假設每個鏈接都從不同的URL獲取內容，並且根據點擊的鏈接將內容插入到不同的容器中，您只需要爲每個這樣的AJAX鏈接分配幾個屬性：

定義屬性data-remote，每個鏈接都可以通過AJAX加載內容。

定義另一個屬性data-container，指定要插入結果的容器ID。

// this is the ajaxy link 
<a id="test" data-remote="true" data-container="container-id" href="..">Load</a>

最後，應用一個單擊處理程序到具有data-remote屬性設置的所有鏈接：

$('a[data-remote]').click(function() { 
    var containerId = this.attr('data-container'); 
    var url = this.attr('href'); 
    $('#' + containerId).load(url); 

    return false; // stop from navigating to the clicked link 
});

來源

2010-03-09 12:36:43 Anurag

這真是個好建議。因爲我們需要一個基於URL的系統。這也應該規定如何加載內容。整個框架實際上需要基於這個解決方案。再一次，很像Facebook :)其中btw是令人驚歎的編碼！ – 2010-03-09 13:33:34

Facebook擁有一些驚人的工程師。如果您製作的是單頁富互聯網應用程序，您可能還需要查看Google在Google Web Toolkit（GWT）中使用的一些實踐。 Wave是用GWT編寫的。 – Anurag 2010-03-09 14:51:09

請記住，使用部分請求會導致瀏覽器導航失效，您的應用程序在可用性方面看起來就像flash一樣，並且您使用的噱頭修復了這仍然是黑客行爲。

您提到了內容滑塊，如果您希望幻燈片效果本身，則會偏離部分請求或預加載的內容，這會變得非常複雜。

如果您不需要實際「滑動」內容，使您的頁面具有緩存在瀏覽器中的所有外部資源（所有CSS，所有JavaScript，所有圖像都從外部加載），並且您的頁面本身只有（希望在標籤方面儘可能簡約）html內容。通過這種方式，緩存中的所有內容都不會看到使用任何額外的帶寬，但內容本身與您通過ajax請求獲得的內容非常相似。

有時候濫用技術的唯一原因是我們沒有正確使用當前的（也是非常簡單的）技術，並且我們試圖在一切即將到來時提出複雜的解決方案。

來源

2010-03-09 12:20:43

「請記住，使用部分請求你將失去瀏覽器導航，應用程序看起來就像閃光就可用性而言，你用它來修復這個問題仍然是一種破壞。「......哇，這完全是不真實的，並且是不合時宜的。想到導航的＃tab1，＃tab2。如果他有20頁的內容，並且用戶想要3您的解決方案**節省帶寬**是加載全部？如果你不知道如何使用這些技術，那完全沒問題，但是說出一些不可能完成的事情，並且有成千上萬的例子是可怕的建議。 – 2010-03-09 12:37:36

也許他的意思是瀏覽器的後退/前進按鈕不起作用。 – Pointy 2010-03-09 12:43:40

@Pointy - 他們會如果你使用哈希導航，只是'Tab1'，'Tab2'，回去/轉發。 – 2010-03-09 12:50:04

jQuery - 動態加載內容，什麼是最有效的？

回答

相關問題