sugulogの日記

JavaScript、Mapオブジェクト!複数画像を遅延読み込みさせクリック時に表示させよう!!

スポンサードリンク

f:id:sugulog:20210810000221p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとMapオブジェクトいうことで

  •  複数画像を遅延読み込みさせクリック時に表示させよう

について簡単に解説します!!

その為このブログを読むことで、Mapオブジェクトについて理解が深まるのはもちろん、複数画像を遅延読み込みさせる技術を手に入れることができます。

是非最後までご愛読ください。

 

今回は、

・Mapオブジェクト

・複数画像を遅延読み込みさせクリック時に表示させよう

の順で解説していきます。

では早速、みていきましょう!!

・Mapオブジェクト

キーと値の組み合わせを保持することができるオブジェクト。

普通のオブジェクトと何が違うのと思いますが、簡単に言えばMapオブジェクトの方がkey取得など操作性に優れていることがあげられます。

new Mapでインスタンス化後に値をセットするのにsetメソッドを使用し、取得するのにはgetメソッドを使用します。

第一引数にキーを指定し第二引数には値を指定します。

その他にも削除する場合にはdeleteメソッド、要素数を取得するのにはsetメソッドを使用したりします。

何度も値を出し入れする場合や複雑な処理を行いたい場合に使用すると可読性が高まります。

より詳しく知りたい方は1度公式リファレンスをお読みください!!

developer.mozilla.org

下記の実装ではMapオブジェクトのget、setメソッドのみを使用します。

・複数画像を遅延読み込みさせクリック時に表示させよう

まずはHTMLで画像表示箇所とボタンを作成します。

f:id:sugulog:20210811225620p:plain

ポイントとしてはdata属性として画像へのパスを持たせていることです。

次にJavaScriptの記述です。

f:id:sugulog:20210811225639p:plain

Mapオブジェクトをインスタンス化させ、各要素を取得しています。

次にDOMContentLoadedでHTML読み込みを監視し、querySelectorAllで取得した2つのimg要素をforEachで展開しています。

そしてMapオブジェクトのsetメソッドを使いそれぞれのimg要素をキーとし、date属性の値を値として保存しています。

Mapオブジェクトではキーの型を問わないのも大きな特徴です。

またボタンがクリックされた際には、HTML読み込み時と同じくquerySelectorAllで取得した2つのimg要素をforEachで展開しています。

そしてMapオブジェクトのgetメソッドを使いキーを指定し、先ほど保存したキーに対する値を取得しています。

この辺は普通のオブジェクトの扱いと変わりませんね!

最後にsrcを使いオブジェクトから取得した値をimg要素のパスとして設定しています。

では実際に動きを見てみましょう。

f:id:sugulog:20210811225656g:plain

初期表示では読み込みされず、ボタンクリック時に画像が表示されているのが確認できますね!!

Mapオブジェクトを使わずとも同じ実装は可能ですが、実際にコードを見た時に非常にシンプルでわかりやすいのを感じてもらえれば幸いです。


以上、今回のブログでした。

Mapオブジェクトについて理解が深まり、複数画像を遅延読み込みさせる技術を手に入れることができましたか??

1つ1つ確実に知識を蓄えていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!