根據 jQuery 中的垂直滾動值加載具有多個背景的長頁面？

Question

我使用的設計是 960 像素寬，約 7000 像素高，在任意點切成五個垂直堆疊的段。 有一個固定放置的側邊欄，可以滾動到每個部分，具體取決於單擊的導航鏈接。 最上面是一堆滑塊、透明 PNG、標題和段落，主要以相對的方式定位。

我最終需要做兩件事：

1. 在側邊欄中隱藏相應的快速導航鏈接，直到其相關段的背景圖像已加載

2. 根據需要在每個部分中加載（理想情況下淡入）透明 PNG - 用戶在兩個垂直滾動值之間滾動並停止一秒鍾，導致該部分的透明 PNG 然后加載並淡入。

我目前正在使用softscroll.js在單擊側邊欄鏈接時實現平滑的滾動效果（從而滾動到相關的錨點）。 因此，在您滾動時開始加載圖像的延遲加載技術將不起作用 - 如果我單擊側邊欄導航中的最后一個鏈接並將我滾動到底部，我不希望底部段之間的每個圖像和結果是頂部加載。

雖然我需要盡快弄清楚第 1 點，但我對第二個問題更感興趣。

當且僅當用戶在兩個特定的垂直滾動值之間暫停時，如何使用 jQuery 在某個元素內加載圖像？

謝謝！

（順便說一句，請不要使用appelsiini 的lazyload jQuery 插件來回應。開發人員不支持它，並且在現代瀏覽器中似乎不起作用。謝謝！）

Answer 1

使用scrollTop()檢查用戶的 position 。 您應該能夠在setInterval()回調中執行此操作。

function loadBackground() {
    var userTop = $(window).scrollTop();
    var userBtm = userTop + $(window).height();
    var elemTop = $('#element').scrollTop();
    var elemBtm = elemTop + $('#element').height();

    if ((userBtm >= elemTop) && (userTop <= elemBtm))
    {
        // Load images
    }
}

$('document').ready(function(){
    setInterval(loadBackground,500);
}

（這是未經測試的代碼，但你明白了。）

編輯：調整條件，以便如果元素的任何部分在 window 中，它將觸發。

Answer 2

對於 Justin 所建議的已經很不錯的解決方案，一個稍微更完整的解決方案是使用jQuery Waypoints來管理視口內事件。

如果您使用 iScroll 或可滾動性之類的東西重寫移動瀏覽器上的滾動機制，您可能會遇到問題。 在這種情況下，您需要使用他們的 API 來調查修復。

Answer 3

在側邊欄中隱藏相應的快速導航鏈接，直到其相關段的背景圖像已加載

尚未對其進行測試，但您應該能夠通過將幾個<img>與背景相同的 src （當然display: none; ）並測試每個圖像的 .complete 屬性來做到這一點，在一個短的 setInterval 循環上，直到它們都被加載。 不要使用 onload，它在圖像上往往不可靠。

根據需要在每個部分中加載（理想情況下淡入）透明 PNG - 用戶在兩個垂直滾動值之間滾動並停止一秒鍾，導致該部分的透明 PNG 然后加載並淡入。

Justin的解決方案應該適用於檢測您何時處於給定部分。 只需在執行軟滾動之前將標志設置為 false，一旦停止，將標志設置為 true - 然后僅在標志為 true 時將部分標記為活動。

我會通過將它們的src屬性指向 1x1 空白 gif 並將它們的data-src屬性設置為真實的 src 來“禁用”圖像。 然后只需執行以下操作：

$('.selected-section img').each(function () {
    $(this).attr('src', $(this).data('src'));
});

您必須確保將“禁用”圖像的大小設置為加載圖像后的大小，否則頁面會跳動很多。

您可以使用 window.onscroll 事件處理程序來檢測您何時滾動，但這通常不是一個好主意。 有關此問題的討論，請參見： http://ejohn.org/blog/learning-from-twitter/