画像の先読み(プリロード) jQuery プラグイン「jquery.preload」

  • このエントリーをはてなブックマークに追加

Javascriptでプリロードを実装するのってそれ用に関数が用意されているわけではないので ちょっと無理やり実装する必要があるんですね・・。

パララックス効果のサイトを作るときなど 画像をたくさん読み込む必要があるサイトを作る時には 画像を先読みしてからコンテンツを表示させるようにしておくと

画像が読み込まれていない状態のサイト閲覧を防ぐことができます。

個人的なイメージなんですけど、プリロードとかHTMLのサイトに実装されていたりすると 「おっ、どんなすごい内容のサイトなんだろう!」ってちょっとワクワクしたりしますw

ということで、プリロードを割りと簡単に実装できるjQuery プラグインを作ってみました!


仕様

  • 画像読み込み時にloadFunctionが実行される
  • 全てが読み込み終わった時にonComplateが実行される
  • 上記を使い読み込み終わるまでの%表示や画像の先読み後の配置を行う
  • 1%づつ増やしていくこともできる

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.preload.js"></script>

オプション

初期設定

imgs : [],
loadFunction : '',
onComplete : '',

timer : false,
timerSpeed : 0
imgs
[], 先読みしたい画像を配列で指定(相対パス・絶対パス・ルート絶対パス)
loadFunction
%が増える度に実行される関数(オブジェクトとして下記を返す)
  • img : 読み込みが終わった画像名(timer : trueの時、仮想の%が画像を読み込むタイミングの%の値が一緒じゃない場合undefinedを返す)
  • percent : 何%読み込み終わったか
  • num : いくつ画像が読み込み終わったか
  • aryNum : 配列の何番目の画像を読み終わったか
onComplete
全ての画像のロードが終わった時に実行される関数(オブジェクトとして下記を返す)
  • img : 読み込みが終わった画像名
  • imgs : 読み込み終わった画像全てが入った配列
  • num : いくつ画像が読み込み終わったか
  • percent : 100を返す
  • aryNum : 配列の何番目の画像を読み終わったか
timer
false, trueだと1%づつスムーズに上がっていきます。
timerSpeed
1%づつ増えるときのスピードの指定

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/96

このページの先頭へ戻る