img01 img01 img01 img01 img01 img01

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/.js"></script>
<script>
	$(window).load(function(){
		$('#LazyLoad .LazyLoad-demo').lazyload({
			effect: 'fadeIn',
			threshold: -500
		});  
	});
</script>
<p>
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb01.jpg alt="img01" width="800" height="533" />
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb02.jpg alt="img01" width="800" height="533" />
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb03.jpg alt="img01" width="800" height="533" />
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb04.jpg alt="img01" width="800" height="533" />
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb05.jpg alt="img01" width="800" height="533" />
	<img class="LazyLoad-demo" src=[tempd]/images/jquery-plugin/dummy02.png data-original=[tempd]/images/jquery-plugin/imgb06.jpg alt="img01" width="800" height="533" />
</p>

LazyLoadについて

LazyLoadは、ページ内の画像読み込みを遅延させるプラグインです。
画像を大量に使っているページなどで使うと、画像がブラウザの表示領域に入った時にロードさせるので、アクセス時のページ表示の遅延が改善されます。
対象要素にoverflow:autoを指定しているとうまく動かない?かも。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Zoom

    Zoom

    ドラッグやマウスオーバーでその場で画像を拡大できる

  • ImageLens

    ImageLens

    画像を虫眼鏡で見ているように拡大することができる

  • Captions

    Captions

    画像のキャプションを表示してくれる

  • ImageScroller

    ImageScroller

    サムネイルをドラッグすることで大きな画像を見ることができる

  • stalactite

    stalactite

    画像をジョジョに読み込んでいきながらタイル状に並べてくれる