MENU
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
  1. ホーム
  2. HTML/CSS
  3. 【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善

【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善

2023 3/15
HTML/CSS SEO
2023年3月12日 2023年3月15日
イグアナ

ページスピード改善方法の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で書き換え、画像読み込みさせます(画像読み込み遅延)

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初心者ながら、大変勉強になりました!
ありがとうございました!

teratail[テラテイル]
仮出力されたimgに画像をdata-srcに当たられた値を挿入し遅延読込させたい JQuery javascript 素人ですm(_ _)m ###仮出力されたimgに画像をdata-srcに当たられた値を挿入し遅延(…というか、非同期)読込させたい “`ht
Into the Program
【jQuery】imgタグのsrcを書き換えて画像を変更する imgタグのsrcを書き換えて別の画像を表示する処理はサイトを制作する上でよく使用します。クリックでボタンのアイコンを変更したり、数秒置きに切り替えたり、ウィンドウサ…
HTML/CSS SEO
SEO プログラミング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】
  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!

この記事を書いた人

tomoのアバター tomo

資格試験やSEOなどについての情報を発信します。現在も資格試験や検定にチャレンジ中!実際に資格を勉強した上で、おススメの勉強方法や講義動画チャンネル、過去問サイトを紹介してます!
(仕事はWEBデザインとWEBマーケ)

この著者の記事一覧へ

関連記事

  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!
    2023年3月19日
  • 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】
    2023年2月18日
  • 複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション
    2022年12月29日
  • プログラミング画面
    THE THOR構造化データの警告エラー修正の方法
    2022年4月12日
  • ロボット AI
    SEO強化!WordPressブログに構造化データプラグインを実装すべき5つの理由
    2022年4月2日
  • SEO検定1級2級テキスト
    SEO検定1級・2級を受けてみた。メリットや勉強方法など試験の備忘録
    2022年3月21日
  • 構造化データとは
    構造化データとは?メリットデメリットや実装方法まとめ!
    2022年3月19日
  • 爆速!阿部寛の公式ホームページはなぜ軽くて表示が速い!?
    爆速!阿部寛の公式ホームページはなぜ軽くて表示が速い!?
    2022年2月20日
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
目次
トモゾウ
埼玉在住でWEBデザイン(フロントエンドエンジニア)の仕事をしながら、いろんな資格試験に挑戦しています。

また、本業とは別にブログを運営してます。資格勉強で学んだことや、WEB(SEO/HTML/CSSなど)を発信中。
About
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
検索
当ブログは「SWELL」を使用しています。
  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

© 2023 週末のトモゾウ

目次