ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.04.23  最終更新日:2021.04.27

js / jQuery

画像を読み込んだら処理をする、のようなときに使えるimagesloaded.jsの使い方

画像を読み込んだら処理をしたい、と、画像を読み込んだタイミングを検知したい場合につかえるimagesloaded.jsという名前のライブラリの使い方のメモです。

imagesloaded.jsの使い方手順

①ファイルのダウンロード

imagesloaded.jsのページ にアクセスしします。
右に並んでいるリンクの中の『Install』というリンクを押すと、同ページ内にある、ダウンロードリンクがある箇所に移動できます。

ここから、ご自身の用途に合わせてファイルをダウンロードします。
(ダウンロードの下にある、CDNをご利用いただくこともできます。)

②ダウンロードしたファイルを任意のフォルダに設置する

ダウンロードしたファイルを、任意のフォルダこれらのファイルを設置してください。

③ファイルを読み込む

任意のフォルダに設置したファイルを読み込みます。
※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。

<script src="js/imagesloaded.pkgd.min.js"></script>

④imagesloaded.jsを動かすコードを書く

最初は、画像を読み込んだら、処理をする、という基本の書き方です。

JS(jQueryの書き方。)

jsは以下のように書くだけです。

(以下は、#containerの中にある画像を読み込んだら、という書き方になります。)

※jqueryで書く場合は、jqueryのライブラリを先に読み込んでおくようにしてください。

$('#container').imagesLoaded( function() {
  // 画像読み込んだらする処理をここに書く
});

サンプル:画像を読み込んだら消えるローディング画面をつくる

ページ内の画像を全て読み込んだら、ローディング画面がフェードアウトする、というサンプルをつくりました。
以下のサンプルの様になります。
HTML、CSS、JSはそれぞれ以下のようになっています。

HTML

※一部省略しています。

<div id="load">
	<p>LOADING画面です・・・</p>
</div>

<header>

	<h1 style="margin-bottom:30px;">imagesloaded.jsの使い方</h1>

</header>


<main>

	<div id="container" class="inner">

		<img src="img/img_01.jpg" alt="">
		<img src="img/img_02.jpg" alt="">
		<img src="img/img_03.jpg" alt="">
		<img src="img/img_04.jpg" alt="">
		<img src="img/img_05.jpg" alt="">
     :
     :
	</div>
	<!-- /.inner -->

</main>

<footer>

	ここにフッターの<br>要素が入ります。

</footer>

JS

$('#container').imagesLoaded( function() {
		$('#load').fadeOut();
	});

最新記事