自動顯示隱藏卷軸上的div div

Question

我有一個非常沉重的（垂直長）網頁有很多圖像。我希望它的頂部儘可能快地出現。

所以我認爲只顯示靠近頂部的div，並將div的樣式/類設置在低於摺疊的位置以「display：none;」，從而防止瀏覽器嘗試加載所有的圖像和它們可能包含的內容，直到它們通過「display：block」顯示當用戶開始向下滾動時。

因此，我有幾個問題：

1. 是我的假設是正確的，大部分現代瀏覽器不會嘗試加載圖像（或將加載它們最後一次），如果他們是一個隱藏的div中，因此會改善加載時間？

2. 我如何通過jQuery實際實現它？我會想象我需要onscroll的一些監聽器函數，但是我怎麼顯示在相關的div上，而不是那些用戶還沒有滾動過的函數呢？也就是說，隨着用戶向下滾動，div按順序顯示。

3. 如何處理#anchors指向隱藏的div。如果我將它們設置爲h標記將保持可見，如果用戶單擊指向此類錨點的鏈接，onscroll函數是否會處理這種情況？

只是爲了清楚起見：基於AJAX的解決方案調用服務器獲取更多內容是不可行的。

謝謝。

Answer 1

我會盡量快速回答三個問題：

1. 據我所知在隱藏層圖像加載反正 - 這樣就不會因爲可能會幫助你提高你的加載時間

2. 存在jQuery插件爲這個確切的用例，這是相當容易實現和相當好的文檔：Lazy Load

3. 我不知道錨點指向隱藏divs - 我想我窩不工作。但隨着延遲加載，你不會有實際隱藏的div - 而不是圖像只會被加載時，視口（或接近）內

Answer 2

1. 號你將不得不這樣做通過預加載圖像。這是一個懸停的例子：https://css-tricks.com/snippets/jquery/image-preloader/，你需要的可能是onScroll preloader。去谷歌上查詢！

2. 舉例：http://luis-almeida.github.io/unveil/，那裏有更多。