jQueryの垂直スクロール値に基づいて、複数の背景を持つ長いページをロードしますか？

Question

私がデザインしたのは、幅960px、高さ7000px、縦に積み重ねられた5つのセグメントを任意の点でカットしたものです。クリックしたナビゲーションリンクに応じて、各セグメントにスクロールする固定配置のサイドバーがあります。この上には、スライダー、透明なPNG、見出し、段落の束があり、主に相対的な位置に配置されています。

私は最終的に二つのことを行う必要があり

：その関連セグメントの背景画像は

ロード（理想的にはフェードイン）がロードされるまで

1. は、サイドバーの対応するクイックナビゲーションリンクを非表示にします二つの垂直スクロール値の間のユーザのスクロールを、そのセクションの透明PNG画像は、負荷とをフェードインさせ、第二のために停止

- 各セクションにおける透明PNG画像は、必要に応じ。

サイドバーのリンクがクリックされたとき（スクロールして関連するアンカーに移動するとき）にスムーズなスクロール効果を得るために、現在softscroll.jsを使用しています。したがって、スクロールして画像をロードするための遅延読み込み手法は動作しません。サイドバーのナビゲーションバーで最後のリンクをクリックして下にスクロールすると、下のセグメントと結果としてトップローディング。

私はポイント1を後ではなく早く理解する必要がありますが、私は第2の質問にもっと興味があります。

1は、ユーザが特定の2つの垂直スクロール値の間に一時停止した場合にのみ場合、特定の要素内の画像をロードするためにjQueryを使用する方法は？

ありがとうございました！

（ところで、くださいappelsiini's lazyload jQuery pluginでない応答を行います。これは開発者によってサポートされていないですし、最近のブラウザで動作するようには表示されません。ありがとう！）

Answer 1

ジャスティンによって提案された既に素晴らしいものに対するもう少し完全な脂肪解決は、jQuery Waypointsを使用してビューポートイベントを管理することです。

iScrollやスクロール可能な機能を使用してモバイルブラウザでスクロールメカニズムを書き直す場合、問題が発生する可能性があります。その場合は、APIを使用して修正を調査する必要があります。

Answer 2

scrollTop()を使用してユーザの位置を確認してください。 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); 
} 

（これは未テストコードですが、あなたのアイデアを得る。）

編集：要素のいずれかの部分がウィンドウ内にある場合、それが起動するように条件を調整しました。

Answer 3

その関連セグメントの背景画像は

をロードしたまでそれをテストしていませんが、あなただけの<img>のカップルを貼り付けることによってこれを行うことができるはずサイドバーに対応するクイックナビゲーションリンクを隠しますバックグラウンドと同じsrc（もちろん、display: none;）を使用し、すべての画像がロードされるまで、短いsetIntervalループで各画像の.completeプロパティをテストします。オンロードを使用しないでください。画像に信頼性がない傾向があります。

負荷（理想的にフェードイン）各セクションにおいて透明PNG画像必要に応じて - 二つの垂直スクロール値の間ユーザがスクロールし、そのセクションの透明PNG画像は、その後にロードし、フェードさせ、第二のために停止

。

ジャスティンのソリューションは、特定のセクションにいるときの検出に役立ちます。ソフトスクロールを実行する前にフラグを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/