動態加載谷歌閱讀器中的項目

我一直在使用Google Reader，並希望實施類似的技術，以「看起來」的方式來延遲加載每篇文章的內容。當你點擊你的一個訂閱時，你會看到一系列帶有片段和其他信息的帖子。當你點擊一個帖子時，它會展開以顯示整個身體。我認爲他們只是簡單地切換元素的可見性，但他們似乎正在動態插入到DOM中。您可以通過在頁面加載後查看HTML來證明這一點 - 沒有擴展內容的標誌。如果主體包含圖像，則僅在展開時加載它們。這顯着提高了初始請求的加載時間，因爲它不會爲每個帖子加載EVERY圖像。動態加載谷歌閱讀器中的項目

我發生了什麼2個想法：

他們正在做一個AJAX請求和插入的響應，從而加載和渲染任何圖像作爲並在需要時。
他們正在用JavaScript做一些事情，但我不知道究竟是什麼。

我第一次嘗試呈現塌陷內容，而是用CSS來使其不可見：

display: none

我然後切換使用jQuery的visibiliy：

$("itemDetail").toggle()

唯一的問題這是在不可見內容中的圖像在初始請求期間被加載 - 這對於使用而言並不明顯但它可能有其他負面影響。

這裏是列表視圖（全部摺疊）：

alt text http://img6.imageshack.us/img6/4503/croppercapture1.jpg

這裏是與擴大後的列表視圖：

alt text http://img6.imageshack.us/img6/4215/croppercapture2.jpg

任何想法？

來源

2009-04-25 Andrew Gunn

我認爲你的問題的一部分丟失了。 SO的降價解析器是一個小錯誤。 – Calvin 2009-04-26 00:14:46

他們正在做一個AJAX請求和插入響應，從而加載和渲染任何圖像作爲當需要。

嗯，是的，這就是他們正在做的。

那麼，究竟是什麼問題？你對可見性的看法完全不同，正如你自己所說的那樣，效率並不高。

所以你需要學習如何將make that request with JQuery和put the HTML you get from the request放到頁面的正確位置。

來源

2009-04-26 03:58:27 AmbroseChapel

嗯，我不認爲他們正在做一個AJAX調用，因爲我看不到任何使用Firebug的服務器的請求！？你說的是相反的，但你怎麼知道？我給了它更多的想法，並意識到他們可以將每個項目的隱藏HTML存儲在JavaScript中，然後在您單擊摺疊行時呈現它。這將解釋內容加載的速度（非常快）。 – 2009-04-26 12:22:47

嗯，我現在在看谷歌閱讀器，項目顯示爲「列表」格式，而不是「擴展」，所以我只看到標題。當我點擊標題以查看帖子的內容時，是的，FireBug向我顯示一個HTTP POST請求。所以，我不知道你在看什麼，但我的理論依然成立。 – AmbroseChapel 2009-04-26 23:53:07

我不確定當你點擊一個摺疊項目來展開AJAX請求時，Google服務器上會有這個請求。我使用Firebug來跟蹤任何使用Net標籤的請求。我只能看到這個特定項目的兩個請求，並且都是託管它的服務器（在本例中爲weblogs.asp.net） - 不確定第一個做什麼，但第二個獲取嵌入在帖子中的圖像。這裏有兩個屏幕截圖，之前和之後，顯示了AJAX請求：

前： alt text http://img207.imageshack.us/img207/8461/croppercapture12.jpg

後： alt text http://img207.imageshack.us/img207/6128/croppercapture13.jpg

我不希望這個問題變成一個arguement，我只是說明我發現的證據，這表明還有另一種解釋。

來源

2009-04-27 11:26:53

動態加載谷歌閱讀器中的項目

回答

相關問題