TopJavaScriptjQueryプラグイン > 2012年7月
2012年7月12日

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

July 12,2012 12:33 AM
Tag:[, , ]
Permalink

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)。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3