スマートフォンサイトで読み込みが遅い、そんな方に向けて、今回、画像遅延読み込みでページ表示速度を向上される方法を紹介します。

どうしても写真は高画質にしたい、ランディング用のページでどうしてもページ自体が長く重くなってしまう。そんな方に特に使ってもらいたいものになります。

今回、実装方法は、jQueryなどは使わず、JavascriptとHTMLのみで行ないます。

まず、以下のJSを作成します。

function afimg(){
  var nodes = document.querySelectorAll('[data-afimg]');
  var length = nodes.length;
  var src, elem;
  for (var i = 0; i < length; i++) {
    elem = nodes[i];
    if (elem.src !== (src = elem.getAttribute('data-afimg'))) {
      elem.src = src;
      elem.removeAttribute('data-afimg');
    }
  }
}
window.onload = function () {
  afimg();
};

次に、imgタグを以下のように書き換えます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-afimg="画像URL">

src部分には空の画像をセットしています。

data-afimgに普段srcに設置している画像URLを入れます。

たったこれだけで、画像が他ソースすべて読み込んだ後に読み込み開始されます。

とてもシンプルなので、ページ重いなって感じるときは是非お試しください。