img配列の書き方を簡単にしたい

お世話になっております。
新人プログラマーです。
現在JavaScriptでUI開発を行っています。

###前提・実現したいこと
動的に使用する画像すべてを配列に格納して
使っているのですが、もっと分かりやすく
簡単に書くことはできないのでしょうか。
現在の書き方は配列途中に追加することが
難しく、冗長に思います。

※画像の個数は固定ではありません。
途中に追加というのが、始めonclickで画像切り替えしていたものを
途中でonmousedown,onmouseupの時にも画像切り替えをいれたときに
画像を追加したのですが、関連する画像をまとめづらいと思ったからです。

また配列であることを利用することはなく、
画像をまとめて格納するために配列を使用しています。

 document.getElementById("firstpg").src=img[2].src;
 document.getElementById("prevpg").src=img[4].src;

###該当のソースコード

JavaScript
1  var img = new Array();		//画像格納配列
2  img[0] = new Image();
3  img[0].src = "images/folder.png";		//フォルダーアイコン
4  img[1] = new Image();
5  img[1].src = "images/pdf.png";		//pdfアイコン
6  img[2] = new Image();
7  img[2].src = "images/B_CP003_01_4.png";	//最初のページ遷移ボタン
8  img[3] = new Image();
9  img[3].src = "images/BC_US231.png";		//最初のページ遷移(非アクティブ)
10  img[4] = new Image();
11  img[4].src = "images/B_CP004_01_4.png";	//前のページ遷移ボタン
12  img[5] = new Image();
13  img[5].src = "images/BC_US_31.png";		//前のページ遷移(非アクティブ)
14  img[6] = new Image();
15  img[6].src = "images/B_CP008_01_4.png";	//次のページ遷移ボタン
16  img[7] = new Image();
17  img[7].src = "images/BC_US_41.png";		//次のページ遷移(非アクティブ)
18  img[8] = new Image();
19  img[8].src = "images/B_CP007_01_4.png";	//最後のページ遷移ボタン
20  img[9] = new Image();
21  img[9].src = "images/BC_US241.png";		//最後のページ遷移(非アクティブ)
22  img[10] = new Image();
23  img[10].src = "images/B_CM026_01_4.png";	//最初のページ遷移ボタンタッチ時
24  img[11] = new Image();
25  img[11].src = "images/B_CM026_01_1.png";	//前のページ遷移ボタンタッチ時
26  img[12] = new Image();
27  img[12].src = "images/B_CM026_01_2.png";	//次のページ遷移ボタンタッチ時
28  img[13] = new Image();
29  img[13].src = "images/B_CP003_01_2.png";	//最後のページ遷移ボタンタッチ時

###補足情報(言語/FW/ツール等のバージョンなど)
足りない情報やソースコード等がありましたら
教えていただけると幸いです。

m.ts10806

2017/09/04 01:41

画像の個数は固定でしょうか？「途中に追加」というのがどのような用途があるのかも質問文に追記願います。また、実際にこの配列をどのように使うかによっても配列の組み方が変わってくるのでその辺りも追記願います。

_3104

2017/09/04 02:32

ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

Imageを設定する関数をつくってもよいかもしれません

javascript
1var img =[
2  newImg("2.jpg"),
3  newImg("images/folder.png"),
4  newImg("images/pdf.png"),
5  newImg("images/B_CP003_01_4.png"),
6  newImg("images/BC_US231.png"),
7  newImg("images/B_CP004_01_4.png"),
8  newImg("images/BC_US_31.png"),
9  newImg("images/B_CP008_01_4.png"),
10  newImg("images/BC_US_41.png"),
11  newImg("images/B_CP007_01_4.png"),
12  newImg("images/BC_US241.png"),
13  newImg("images/B_CM026_01_4.png"),
14  newImg("images/B_CM026_01_1.png"),
15  newImg("images/B_CM026_01_2.png"),
16  newImg("images/B_CP003_01_2.png"),
17];
18function newImg(src){
19  var i=new Image;
20  i.src=src;
21  return i;
22}

投稿2017/09/04 01:45

yambejp

総合スコア114784

ベストアンサー

事前に画像パスを配列にしてしまうのはどうでしょうか。
また、Array.push()を利用すれば途中追加も容易かと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push

JavaScript
1var pathList = [
2    "images/folder.png",
3    "images/pdf.png",
4    "images/B_CP003_01_4.png",
5    // ここにパスを追加していく
6];
7
8var img = new Array();
9for (var i = 0; i < pathList.length; i++) {
10    var image = new Image();
11    image.src = pathList[i];
12    img.push(image);
13}