jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み)

画面下までスクロールすると次のページを読み込んでくれるヤツですね。
イロイロ見てると次のような考え方みたいす。

対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。

まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。

1
var contentBottom = $('#target').offset().top + $('#target').height();

offset().top で対象がページの一番上からどの高さにあるかがわかるので、これに対象の高さ height() を足して求めます。

次に、今どの位置までウィンドウに表示されているか求める。

1
var displayBottom = $(window).scrollTop() + $(window).height();

スクロール位置 scrollTop() にウィンドウの高さ height() を足せば、どこまで表示されているかがわかります。

あとは、画面スクロール時に両者を比較して次のページを読み込むか判断します。まあ、あんまりギチギチにしても仕方ないので、10px(超適当っす)くらい余裕をもたせることにします。

1
2
3
4
5
$(window).scroll(function(){
    if (contentBottom - displayBottom < 10){
        // ページ読み込み
    }
});

スクロールされてから画像をあとで読み込むヤツも同じコトしてるのかもね。それはまた今度。
サンプル

2011.04.21追記
スクロールイベントに登録した処理が複数読み込まれないよう排他制御入れました。詳しくはサンプルみてね。

jQueryゼロから / スライドショー(複数の画像をフェードイン・フェードアウト表示)

ありがちな画像をフェードインで複数見せるヤツです。
画像をクリックするとリンク先に飛ぶようにします。
下記のようにリンク付き画像をまとめて指定することにします。

1
2
3
4
5
<div id="target">
    <a href="http://..."><img src="A.png" /></a>
    <a href="http://..."><img src="B.png" /></a>
    <a href="http://..."><img src="C.png" /></a>
</div>

ただ、画像を重ねた状態でのフェードイン・フェードアウトってリンクとか他のタグがあるとうまくいかないので、画像だけになるようにJavaScriptでいったん再構成します。再構成後のHTMLは最大でもフェードインとフェードアウトの画像が2枚ある感じ。
あ、ついでに #target ではこの2枚の画像が重なるように CSS で position: absolute; を指定しときます。

1
2
3
4
5
// #target img { position: absolute; } で画像が重なるように指定
<div id="target">
    <img src="..." /> <!-- フェードインする画像 -->
    <img src="..." /> <!-- フェードアウトする画像 -->
</div>

とりあえず、もとのHTMLの #target から <a> タグを取り出して、eachループ内で画像ファイル名とリンク先のURLを集めることにします。

1
2
3
4
5
6
$('#target').find('a').each(function(){
    // 画像とリンクを集めとく(ループ内でthisは<a>タグ)
    var image = $(this).find('img').attr('src');
    var link = $(this).attr('href');
   ...
});

さらにスライドショー表示用に、あらかじめ<img>タグにクリックでリンク先のURLを開くようにしときます(clickイベントを指定)。これを適当な配列に入れときます。

1
2
3
4
5
...
var slide = $('<img>').attr('src', image).click(function(){
    window.open(link);
});
slides[slides.length] = slide;

画像はHTMLで上から指定した順に3秒置きに表示することにします。
もともとあったタグは一度リセットしちゃいます。

1
2
3
4
5
6
var index = 0;
// リセットして1枚目の画像だけ表示
$('#target').html(slides[index].clone(true));
setInterval(function(){
// フェードイン・フェードアウト処理
}, 3000);

index は 0 〜 slides.length – 1 の範囲に収まるようにします。超えたら 0 にリセット。
slides に格納したデータは clone(true) で複製します。そうしないと、フェードイン・フェードアウトや削除したりで影響を受けてしまうので、オリジナルは加工しないようにします。
ちなみに clone(true) の様に引数に true があると、関連付けられたイベントも複製してくれます。これで、さっき追加したクリックイベントが引き継がれます。

1
2
3
4
5
6
7
8
9
10
11
12
13
// setInterval のループ内
$('#target > img').fadeOut('slow', function(){
    $(this).remove(); // 表示中の画像はフェードアウトして削除
});

index++;
if (index >= slides.length){
    index = 0;
}

// 次の画像を複製してフェードイン
var image = slides[index].clone(true);
$('#target').prepend(image.fadeIn('slow'));

先にフェードアウトさせる方が、表示中の画像が1つなので jQuery で指定しやすいです。($(‘#target > img’) で指定)
IEなど透過ができないブラウザもありますが(jQuery で $.support.opacity で判定できます)画像だけならfadeIn / fadeOut で対応できるので特に判定は入れません。

任意の画像を表示するインターフェイスを用意したり、スライドアニメーションを停止したりなどの機能もあるとそれっぽいですが、とりあえず基本部分だけ。
サンプル

2011.11.03追記
よくあるナビもつけてみた
ナビ付きスライドショー