ページスピード改善方法の1つであるレイジーロードは、ブラウザの表示エリアに入ったら画像を読み込むという方法です。
ですが、初めから表示エリアに入ってしまっている画像を読み込み遅延させるという目的にはあまり適していません……。
また、よくある『display:noneにしておけば表示しない』ですが、表示されてないだけで、display:noneされた画像は裏でしっかり読み込まれています。
そうなるとページの表示スピードは当然遅くなります。
最初は画像は読み込まれず、必要になったとき(マウスオーバーやタップ、クリックなど)に、画像が読み込まれてほしい!!
というわけで、画像の遅延読み込みをLazy Load(レイジーロード)以外でやりたく、簡単ですがその方法をまとめてみました。
読み込み動作の順番を整理する(やりたいことの整理)
いきなり全部の動きを頭の中で整理して、ささっとコードは書けない未熟者なので、1つ1つ動きを確認していきます。
最終的なhtmlのソースは下記です。
<div class="result">
<p>ここをクリック、またはマウスホバー</p>
<ul>
<li><img src="ダミー画像" data-src="画像.jpg" alt="" width="" height=""></li>
<li><img src="ダミー画像" data-src="画像.jpg" alt="" width="" height=""></li>
<li><img src="ダミー画像" data-src="画像.jpg" alt="" width="" height=""></li>
<li><img src="ダミー画像" data-src="画像.jpg" alt="" width="" height=""></li>
<li><img src="ダミー画像" data-src="画像.jpg" alt="" width="" height=""></li>
</ul>
</div>
最終目的は、ページ表示したときはダミー画像『placeholder.png』を表示させます。
そして、『ここをクリック、またはマウスホバー』をすると、imgタグ内のsrc部分をdata-srcで書き換え、画像読み込みさせます(画像読み込み遅延)
①srcとdata-srcの中身を入れ替え
②特定の場所をマウスオーバーまたはタップ(クリック)すると、①が動く
③1か所だけでなく複数の画像を入れ替え
②と③はどちらがさきでもいんですが、トライ&エラーを繰り返すときに、動きを確認しやすいと思って②を先にしています。
srcとdata-srcの中身を入れ替え
①から順々にやっていきます。
使うのはattrです。
属性を取得したり、入れ替えたりできる便利なattr。
まず、srcの中に何も入れていないのはよろしくないので、仮の画像をいれておきます。1pxの透過したpng画像で十分です。
それくらいでしたら容量も小さいのでページスピードには、ほとんど影響ありませんし。
そしてsrcとdata-srcの中身を入れ替えます。
▼サンプル01

上に表示されているイラストは、data-srcに入れていた画像パスを、ダミー画像であるsrc『placeholder.png』と入れ替えたものになります。
(ソース参照)
htmlとJQueryは下記のようになっています。
<div class="box01">
<img src="https://webkatsudou.com/wp-content/uploads/2023/03/placeholder.png" data-src="https://webkatsudou.com/wp-content/uploads/2023/03/kids_chuunibyou_boy.png"
alt="画像" width="370" height="400">
</div>
.box01{
width:500px;
hight:500px;
}
var originSrc = $('.box01 img').attr('data-src');
$('.box01 img').attr('src', originSrc);
最初「$(‘.box01’).attr(‘src’, ‘data-src’);」の一行でいけるかなーって安易に考えていたら、.attrは「.attr(“属性”),(値)」なので、直接「’data-src’」を値のところに入れることができませんでした……。
ワンクッション踏んで、先にoriginSrcにdata-srcの中身を入れてから、再度attrを使い、srcをoriginSrc(中身はdate-srcが入っている)で書き換えました。
マウスオーバーまたはタップ(クリック)すると画像を読み込む
次に②です。
最初からsrcの中身をdata-srcで書き換えるのではなく、特定の場所をマウスオーバーやクリックしたら、画像読み込みさせるようにします。
とはいえ、ハウスオーバーするまで『placeholder.png』が出てるのは微妙なので、こちらもマウスオーバーされるまでdisplay:noneさせておきます。
▼サンプル02
ここをマウスオーバーまたはタップ

html/cssとJqueryは下記のようになっています。
<div class="box02">
<p>ここをマウスオーバーまたはタップ</p>
<img src="https://webkatsudou.com/wp-content/uploads/2023/03/placeholder.png" data-src="https://webkatsudou.com/wp-content/uploads/2023/03/kids_chuunibyou_boy.png"
alt="画像" width="370" height="400">
</div>
.box02{
width:500px;
hight:500px;
}
.box02 p{
background-color:#fff;
}
.box02 img{
display:none;
}
$('.box02').mouseover(function(){
$('.box02 img').css('display', 'block');
var originSrc = $('.box02 img').attr('data-src');
$('.box02 img').attr('src', originSrc);
});
ページを開いた段階ではsrcにダミー画像の『placeholder.png』が入っており、ボックス自体が『display:none』で表示されないようになっています。
そして、『ここをマウスオーバーすると画像読み込み』部分にマウスを合わせると、srcにdata-srcの画像を入れ替えるようにしました。
複数のsrc画像をそれぞれのdate-srcのデータと入れ替え、遅延読み込みさせる
一個前までは比較的簡単だったのですが、ここからがjQuery未熟者の自分だと頭をひねりました。
1つのファンクションで1個の画像を入れ替えるだけならいいのですが、複数の画像を、それぞれの画像で入れ替えるとなると……。
一個前までのJQueryでは、『originSrc』の中に1個のdata-srcしか保管できないので、複数の置換imgがあっても、全部同じdata-srcに置換されてしまいました
なので、別途複数のdata-srcを保管できるようにします。
▼サンプル03
マウスオーバーすると動物の画像が表示
ここをマウスオーバーまたはタップ
html/cssとJqueryは下記のようになっています。
<div class="box03">
<p>ここをマウスオーバーまたはタップ</p>
<ul>
<li><img src="https://webkatsudou.com/wp-content/uploads/2023/03/placeholder.png" data-src="https://webkatsudou.com/wp-content/uploads/2023/03/rufi01.webp" alt="" width="" height=""></li>
<li><img src="https://webkatsudou.com/wp-content/uploads/2023/03/placeholder.png" data-src="https://webkatsudou.com/wp-content/uploads/2023/03/zoro.webp" alt="" width="" height=""></li>
<li><img src="https://webkatsudou.com/wp-content/uploads/2023/03/placeholder.png" data-src="https://webkatsudou.com/wp-content/uploads/2023/03/sanji.webp" alt="" width="" height=""></li>
</ul>
</div>
.box03{
width:500px;
hight:500px;
}
.box03 p{
background-color:#fff;
}
.box03 ul{
display:flex;
flex-wrap:wap;
}
.box03 ul li{
list-style:none;
width:200px;
}
.box03 ul li img{
display:none;
}
$('.box03').mouseover(function() {
$('.box03 img').css('display', 'block');
// 複数のdata-srcを、eachの繰り返しを使い、originSrcの中に格納
var originSrc = $('.box03 img').each(function() {
var origin = $(this).data('src');
});
console.log( originSrc );
// originSrcの中に格納したsrcを、それぞれのdata-secで書き換え
originSrc.each(function() {
var element = $(this).data('src');
$(this).attr('src', element);
});
});
入れ替える画像が一個なら「var originSrc = $(‘.box02 img’).attr(‘data-src’);」だけでよかったのですが、複数個となると繰り返す必要がありました。
それが、下記の部分になります。
var originSrc = $('.box03 img').each(function() {
var origin = $(this).data('src');
});
console.log( originSrc );
↑のconsole.logは、originSrcの中にちゃんと複数data-srcが格納されているかconsoleで確認するために入れているので、不必要な方はとってください。
originSrcの中に複数data-srcが格納されているか確認できたら、また繰り返しで、それぞれのsrcに対応するdata-srcで書き換えてます。
とりあえずは出来ましたが、もっとスマートな書き方が出来るきがします…。
それに、マウスオーバーやタップ(クリック)するたびに、何度もdata-srcの画像を読み込んでは画像遅延の意味がないので、一回だけ読み込むようにする改良は必要です。
JQueryの1行目「$(‘.box03’).mouseover(function() {」の部分に、一回だけ動作させる「one」を使います。
$('.box03').one("mouseover",function(){
これで一回だけ画像読み込みになりました。
sprite画像(スプライト)で画像遅延読み込みさせる
「画像遅延読み込み」という目的に対して、srcをdata-srcと入れ替えるのではなく、別の方法で遅延させる方法も紹介します。
複数の画像を1枚にまとめてbackgroundで表示させる=スプライトという方法です。
スプライト画像をbackgroundとposition(位置指定)で表示させます。フッターやヘッダー、カテゴリまわりの画像に使用されています。
スプライト画像を使うメリットは下記になります。
- 画像サイズが小さく、容量も小さい画像であれば、それらを10個くらいまとめて1枚画像にしても、ユーザー側の読み込み容量はそんなに変わらない。
- サーバー側へのリクエスト回数が減るので、サーバー側の負担が減る。
反対にデメリットは、『1枚が大きい画像には不向き』という点です。
複数のサイズが大きい画像をまとめてしまうと、画像容量が大きくなってしまい、結局読み込みに時間がかかってしまいます。
ともかく、画像10枚を1枚にして画像容量が変わろうが変わるまいが、はじめに読み込まなくていいなら、読み込み遅延させます!
▼サンプル(スプライト画像)
ここをマウスオーバーまたはタップ
表示はdata-src入れ替えとほとんど変わらないですが、srcではなくbackground-imageに画像をいれています。
html/cssとJQueryは下記の用になっています。
<div class="box04">
<p>ここをマウスオーバー</p>
<ul>
<li class="sprite btn01"></li>
<li class="sprite btn02"></li>
<li class="sprite btn03"></li>
</ul>
</div>
.box04{
width:600px;
height:200px;
}
.box04 p{
background-color:#fff;
}
.box04 ul{
display:flex;
flex-wrap:wap;
}
.box04 ul li{
list-style:none;
}
.sprite{
display: inline-block;
width:200px;
height:200px;
}
.btn01{
background-position: 0px 0px;
}
.btn02{
background-position: -200px 0px;
}
.btn03{
background-position: -400px 0px;
}
$('.box04').one("mouseover",function(){
$('.sprite').css('background-image','url(https://webkatsudou.com/wp-content/uploads/2023/03/wanpi.webp)');
});
JQuery的には、スプライト画像の方がdata-srcを入れ替えるより簡単ですね。
画像遅延させたい目的やサイトデザインによって、どちらを使うか臨機応変に変えていけばいいのかなと思います。
参考にしたサイトやページ
このsrcとdata-srcの中身(画像)を入れ替えるのに参考にしたページは下記です。
JQuery初心者ながら、大変勉強になりました!
ありがとうございました!

