2013-02-15 71 views
0

我一直在尋找各種基於jQuery的幻燈片劇本,對使用的不同方法感興趣,以及他們如何處理基於CSS3的轉換和DOM操作。我有一個幻燈片演示基於jQuery的WordPress插件,但它有點過時,所以我正在對它進行重新編碼。幻燈片DOM操作

我對jQuery非常熟悉,多年來一直在使用它,並且編寫了一個公開可用的插件我已經看到一些極端的使用情況,其中超過1920x1200 +的圖像已被使用(主要是攝影師) 。

在進行一些研究以更好地處理這種情況的方法比我更好的時候,我已經看到了兩種流行的趨勢,我想知道哪種更好。

第一種方法是將「幻燈片」簡單地放置在一個容器中,然後再進行動畫處理。通常情況下,容器是絕對定位的,可以將其從文檔流中提取出來並加快速度(特別是在使用CSS3時)。

接下來是在DOM內保留4到8個「幻燈片」,並在用戶導航時附加/刪除它們。

哪種方法是更好的方法?從DOM添加/刪除被認爲是最昂貴的修改,但是在這種情況下,比在文檔流之外操作包含超過50個非常大的圖像的容器更便宜嗎?特別是在移動設備上。

+0

「哪種更好」類型的問題通常不適合於計算器。 – jfriend00 2013-02-15 00:58:04

+0

相當荒謬的評論? Stackoverflow是「面向程序員的獨立於語言的合作編輯問答網站」。這是一個問題,我正在尋找答案。我不明白這是不恰當的。 – 2013-02-15 01:55:46

+0

StackExchange有一條線,其中一個問題只是對很多人的意見的調用,除了人們的意見之外,其實並沒有特別的基礎,這對於StackExchange並不是一個好問題。其中一些類型的問題通常會以不適當的方式關閉。 – jfriend00 2013-02-15 06:02:33

回答

1

如果你想成爲大量幻燈片中最有效的內存使用方式,那麼你只想一次加載一些幻燈片圖像(接下來的幾張幻燈片),而不是整套。

與此同時,您需要預先加載一些即將到來的圖像,以便在您想要顯示它們時準備就緒,因爲最耗時的任務是在顯示之前通過互聯網將圖像下載到本地瀏覽器。

如果你只預裝了幾個即將到來的圖像,那麼你可以:

  1. 預壓他們,你在你的JavaScript舉行,然後在需要時將其插入到DOM的img對象。

  2. 將它們預加載到已在DOM中但已隱藏的img對象,然後當您想要顯示它時,可以使其可見。

只要你只是提前預載一對夫婦的圖像,並刪除之前顯示的圖像,以便它們不會保留在內存中,當不再需要時,不應該有這兩種方法之間的差異顯著。如果你真的想知道它們之間是否存在可測量的差異(在內存消耗中),你必須設法進行性能測試,以便測量。


我已經建立在能夠顯示非常大的數字圖像和最重要的事情,過去的幻燈片是確保爲您的幻燈片運行時,它不是積累的內存使用情況和使用越來越多記憶。內存使用量應該隨着幻燈片放映最初運行而上升,然後應該逐漸平緩並停止增長,因爲當您加載更新的圖像時,您會達到穩定狀態,在此狀態下釋放較舊的圖像。這在瀏覽器中有點難以衡量,因爲它們還具有內存緩存和惰性垃圾收集功能,從而掩蓋了幻燈片實際使用的內存,但是如果讓它運行足夠長的時間以獲得大量的圖像,它會繼續永遠上升,然後你知道你有一個問題需要解決。如果它高原並停止上漲,那麼你可能是好的。

+0

非常感謝,非常全面和有用的答案。就在我期待的:)我非常感謝你在回答這個問題上的時間,謝謝!將進一步研究這種方法。 – 2013-02-15 18:32:08

1

我會做一些事情..我會保持一些額外的圖像,除了在dom內顯示的那些..所以無論何時用戶滑向左側或右側..我只是顯示一個圖像已經被下載並附加到dom(非常便宜的操作)。

在同一時間,我會刪除從dom的方式,並將它們緩存到JavaScript數組中的圖像。

這樣我就不會用過多的圖片來加重DOM的負擔(你不知道滑塊將事先包含多少圖片),同時我也不會通過嘗試操縱太多來破壞UX images DOM wise