lazzyload

lazzyloadは画像またはテキストを遅延でロードするプラグインです．
ウィンドウに画像・テキストが入るとこれらの読み込みを順々に開始していきます．
→サンプルページ

プラグインを読み込む際はheadタグの終了直前でscriptタグを使用して記述します．
まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.lazyload.min.js]
を読み込み使用する準備が完了します．

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

つづいてフォルダ構造の確認です．
jsフォルダ以下に下記のファイルがあるか確認しておきましょう．

<script type="text/javascript">
	$('img').lazyload({
		effect: 'fadeIn',
		effectspeed: 2000
	});
</script>

[jquery.lazyload.min.js]読み込み後のscriptタグではlazzyloadの初期設定を行います．ここではimgタグに対して遅延ロードを行うように設定しています．
effectはロードの際のアニメーション，effectspeedは読み込みの速度です．

今回のサンプルで画像はデフォルト表示用のサムネイル画像（小さい画像）と本画像（クリック後の大きい画像）を用意します．（上記のフォルダ構造を確認）

<div>
	<a href="img/works_img/01.jpg">
		<img class="lazy" src="img/thumb/loader.jpg" alt="thumb01" width="250px" data-original="img/thumb/01.jpg" />
	</a>
</div>

上記は実際に遅延ロードを行いたい画像に対しての設定です．
このサンプルでは，ボックス（divタグ）の中にリンク（aタグ）を用意しその中にサムネイル（imgタグ）を配置している状態です．aタグのhrefではサムネイルクリック後に表示する本画像を指定しています．
imgタグのセレクタのclassにlazyと記述することで，プラグインの使用を認めます．

※注意すべき点は，srcでダミー画像を指定し，data-originalでサムネイル画像を指定することです．srcのダミー画像はフェイドインする前に表示するための画像を指定します．（ローディング用画像）data-originalはローディング後に実際に表示する画像となります．

以上の指定でlazzyloadを使用することが出来ます．