画像の遅延読み込みができるJavaScriptライブラリlayzr.jsの使い方です。ウィンドウ表示領域外の要素や画像は非表示もしくは代替画像にしておいて、スクロールやリサイズでウィンドウ表示領域内に入ったタイミングで表示します。画像の多いサイトの場合、ページの読み込み時間が短縮できます。

layzr.jsはCDNが提供されています。headタグ内に貼り付け用のコードです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.2.2/layzr.min.js"></script>

htmlに記述するコードは通常の画像と背景画像とで異なります。
まず通常の画像の場合です。imgタグのsrc属性は代替画像にして、data-layzr属性で遅延読み込みする画像を指定します。

<img src="img/spacer.gif" data-layzr="img/img-01.jpg" alt="">

続いて背景画像の場合です。
背景画像を設定するdivタグ等にdata-layzr属性で遅延読み込みする画像を指定します。また、data-layzr-bg="data-layzr-bg"、width、heightの指定が必要です。widthとheightは元画像の横幅と縦幅を指定し、実際の表示はCSS側のbackground-size等で制御します。なお、background-imageの画像パスの出力用にsrc属性で遅延読み込みする画像を指定します。

<div src="img/main.jpg" data-layzr="img/main.jpg" data-layzr-bg="data-layzr-bg" width="2000" height="1200">
<h1>タイトル</h1>
</div>

最後にJavaScriptのソースです。
オプションのthresholdは画像の読み込み位置を単位vhで調整します。
画像の遅延読み込み実行後の処理として、背景画像の場合はdivタグ等のsrc属性からbackground-imageの画像パスを設定します。そして不要になったsrc属性とdata-layzr-bg属性を削除します。

//オプション設定
var layzr = Layzr({
	normal: 'data-layzr',
	threshold: 50
});

//画像の遅延読み込み実行後の処理（背景画像用）
layzr.on('src:after', function (elm) {
	if(!elm.hasAttribute('data-layzr-bg')) return;
	elm.style.backgroundImage = 'url(' + elm.getAttribute('src') + ')';
	elm.removeAttribute('src');
	elm.removeAttribute('data-layzr-bg');
});

//実行処理
document.addEventListener('DOMContentLoaded', function() {
	//update()：初回ページ表示時やDOM構造が変わった場合
	//check()：ウィンドウ表示領域内に画像があるか確認し実行
	//handlers(true)：スクロール・リサイズイベント時に実行 
	layzr.update().check().handlers(true)
}, false);