lazyload(レイジーロード)の使い方


lazyload(レイジーロード)は画像を非同期読み込みに設定してページ速度を改善する為のプラグインになります。

プラグインは以下のサイトからダウンロードしましょう。


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
	$(function($){
		if ($('img.lazy').size()>0) {
			$('img.lazy').lazyload({
				threshold: 300,
				skip_invisible: false,
				effect: 'fadeIn',
				effect_speed: 300,
				placeholder : "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
			});
		}
	});
</script>

<img src="images/hoge.jpg" width="640" height="480" alt="">

//以下のようにimgタグのclassにlazyを付与して、scrをdata-originalに変更するだけ。↓↓

<img class="lazy" data-original="images/hoge.jpg" width="640" height="480">

lazyloadのトリガーはスクロールなので、googleBOTには捕捉されません。。

画像SEOを重視する可能性があるのであれば対策が必要になってきます。

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*