當不在視圖中時隱藏圖像

我目前正在構建一個使用jQuery爲動畫滾動的單頁網站。我有一個使用jQuery Ajax嵌入的Tumblr博客。當博客加載其所有圖像時，它滯後於滾動動畫。當不在視圖中時隱藏圖像

作爲一種方式來幫助我，直到scrollTop在一定的範圍內或博客，甚至只有當用戶沒有滾動至少半秒時才加載博客（以阻止它觸發滾動時通過元素）

但是，就像我說的，一旦它被加載的圖像導致滾動滯後。什麼是隱藏圖像的最佳方式（它們已經加載），而不是在視圖中時，只有當用戶沒有滾動時才顯示它們？這樣，當滾動動畫直接移過它們時，它們會保持隱藏狀態？

2012-12-16 THEK

你可以簡單地使用jQuery("#your-image").hide();

但你可能遇到的問題是一個瀏覽器的緩存泄漏。所以你可以做的是從DOM中刪除圖像，但是每次用戶滾動時都必須重新加載它們，你將獲得巨大的數據傳輸。所以我建議只使用jQuery中的hide()函數，但這不能解決緩存問題。

一件不錯的事情可能是啓動谷歌瀏覽器並使用提供的開發者工具。只需在您的鍵盤上按f12，然後查看Timeline。在頂部的第三個標籤（左側）中，您可以選擇memory，這是非常高的嗎？像這樣的網站的巨大危險是內存溢出。這意味着JavaScript垃圾收集器無法刪除所有unused對象。所以確保你做對了。

編輯：我發現this文章，你可能會發現有趣的閱讀的碎雜誌的Facebook頁面上。

來源

2012-12-16 21:19:45 Jelmer

加載時內存達到11MB，加載時達到8MB，靜態時達到5MB左右。 – THEK

@這就好像是對的。如果'hide（）'修復了這個問題，請回報。我很好奇它在你的背景下做了什麼。 – Jelmer

我試過隱藏，它幾乎和我想要的完全一樣。我現在改變了它，所以它只是改變了可見性，所以它保持了圖像的高度。但你是Chrome開發者控制檯是一個巨大的幫助。 http://sitetest.kdmdesign.net - 這是我使用它的頁面。 – THEK

也許你可以使用低分辨率或更小的縮放圖像來替換當前不可見的圖像。然後，一旦scrollTop使它們可見，您可以重新加載這些圖像的高分辨率版本。理想情況下，用戶應該有兩個版本緩存，所以他只會看到低分辨率的圖像半秒鐘。

來源

2012-12-16 21:35:57

當不在視圖中時隱藏圖像

回答

相關問題