kobitoDevelopment · March 10, 2022 04:12
diff --git a/css b/css
 .lazy {
    display: none;
 }
diff --git a/html b/html
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="jquery.lazyload.min.js"></script>  
 </head>

 <body>
  <img class="lazy" data-src="遅延読み込み表示させたい画像パス" src="遅延読み込みされるまで表示されるダミー画像パス">
  <noscript>
    <img src="JavaScriptオフ時に表示させたい画像パス">
  </noscript>
 </body>

 <!-- ----------------------------------------------------
 スクロール値を利用するscriptと併用する場合、
 lazyloadを実装する<img>にはcssもしくはwidth height属性で
 幅、高さを指定する必要あり
 ------------------------------------------------------ -->

 <!-- loading属性を使用する場合 -->

 <img loading="lazy" src="画像パス">

 <iframe loading="lazy" src="コンテンツパス"></iframe>

 <picture>
  <source srcset="画像パス">
  <source srcset="画像パス">
  <img loading="lazy" src="画像パス">
 </picture>
diff --git a/js b/js
 $(function() {
  $('.lazy').show();
  $('.lazy').lazyload(); //.lazy部分は希望のclass名で可
 });
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="jquery.lazyload.min.js"></script>
	</head>

	<body>
	<img class="lazy" data-src="遅延読み込み表示させたい画像パス" src="遅延読み込みされるまで表示されるダミー画像パス">
	<noscript>
	<img src="JavaScriptオフ時に表示させたい画像パス">
	</noscript>
	</body>

	<!-- ----------------------------------------------------
	スクロール値を利用するscriptと併用する場合、
	lazyloadを実装する<img>にはcssもしくはwidth height属性で
	幅、高さを指定する必要あり
	------------------------------------------------------ -->

	<!-- loading属性を使用する場合 -->

	<img loading="lazy" src="画像パス">

	<iframe loading="lazy" src="コンテンツパス"></iframe>

	<picture>
	<source srcset="画像パス">
	<source srcset="画像パス">
	<img loading="lazy" src="画像パス">
	</picture>
	$(function() {
	$('.lazy').show();
	$('.lazy').lazyload(); //.lazy部分は希望のclass名で可
	});