Lazy Load Plugin for jQueryでスクロールした際にフワッと画像が浮かび上がるような効果を得る

diary 




<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script src=jquery.lazyload.mini.js></script>

        <script type="text/javascript">//<![CDATA[

		jQuery(document).ready(function($){

		jQuery("img").lazyload({

		effect:"fadeIn",

		placeholder : "images/grey.gif",

	    });

		});

		//]]></script> 

</head>

<body>

<img src="img001.jpg" />

<img src="img002.jpg" />

<img src="img003.jpg" />

<img src="img004.jpg" />

<img src="img005.jpg" />

<img src="img006.jpg" />

</body>

</html>


HTMLをこのように記述します。

jquery.lazyload.mini.jsを任意のディレクトリに（この例ではhtmlと同じディレクトリ）保存します。

placeholder :の画像へのパスは環境に合わせて画像へのパスを指定してください。

ここで指定する画像(grey.gif)は1px×1pxの、色は#C2C2C2のgif形式の画像が良いかと思います。



このような指定により、img001〜img006の画像がスクロールで画面内に表示されるごとにフワッと浮かび上がるような効果が得られます。