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

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

Posted at July 12,2012 12:33 AM
Tag:[jQuery, Plugin, ScrollTrigger]

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

ScrollTriggerプラグインロゴ

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

1.目的

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

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

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

2.機能

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

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

サンプル
サンプル

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

3.プラグインのダウンロード

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

jquery.scrolltrigger_0.0.1.js

4.プラグインの設定

ページに以下のような設定をします。この例では「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:トリガ起動時のコールバック関数のパラメータ

5.動作確認

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)