小粋空間  -  a cheap joke and a play on words site

jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン

jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。

当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。

１．目的

Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。

ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。

本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。

２．機能

ページをスクロールして、プラグインで指定した要素名（id属性値／class属性値）が表示されたことを契機に、任意の関数を実行することができます。すでに同じようなプラグインがあったらすいません。

サンプルとして、Facebookの「いいね！」ボタンとLikeboxを表示するサンプルを作ってみました。

サンプル

サンプルの初回ロード時間は一瞬で完了し、ページをスクロールして「いいね！」ボタンとLikeboxを表示するエリアが表示されると、関連のJavaScritpを読み出すようにしています。

３．プラグインのダウンロード

下記のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.scrolltrigger.jsとします。

jquery.scrolltrigger_0.0.1.js

４．プラグインの設定

ページに以下のような設定をします。この例では「id="foo"」を設定したdiv要素が、スクロールでページに表示された時点で、関数barを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.scrolltrigger.js"></script>
<script>
jQuery(function() {
    jQuery('div').scrolltrigger({
        trigger: '#foo',
        callback: 'bar'
    });
});
var bar = function(){
    // 実行したい処理を記述
};
</script>
…中略…
<div id="foo"></div>

オプションの意味は次のとおりです。

• trigger：トリガとなる要素名／id属性値／class属性値
• callback：トリガ起動時のコールバック関数名
• parameter：トリガ起動時のコールバック関数のパラメータ

５．動作確認

Google Chrome/Firefox/IE9/Oepra/Safariで正常に動作することを確認しています。なおサンプルはIE9で期待通りの表示にならないようですのであしからず。

また、要素名やclass属性値指定の場合、初回のヒットのみ有効です（v0.0.1）。