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

<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>

<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);

<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);
});

<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);
       });
});

$('.box03').one("mouseover",function(){

<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)');
	});