1

申し訳ありませんが、私は重度の初心者です。

ループを使用して画像をロードする方法を教えてください。

つまり、次のタイプのコードを書き直して、ループを使用してプロセスを自動化します。

function loadimages() {
    pic00 = new Image;
    pic00.src = "images/IMG_0019.jpg";

    pic01 = new Image;
    pic01.src = "images/IMG_0020.jpg";

    pic02 = new Image;
    pic02.src = "images/IMG_0021.jpg";

    pic03 = new Image;
    pic03.src = "images/IMG_0022.jpg";

    pictures = new Array(4);
    pictures[0] = pic00;
    pictures[1] = pic01;
    pictures[2] = pic02;
    pictures[3] = pic03;
}

似たようなことを説明している投稿をたくさん見たことがありますが、私は愚かすぎて理解できません。どんな助けでも感謝します。

よろしく

4

3 に答える 3

3

これは次のようになります。

var URLs = [
  "http://placehold.it/128x128.png/f00/400?text=Red",
  "http://placehold.it/128x128.png/0f0/040?text=Green",
  "http://placehold.it/128x128.png/00f/004?text=Blue",
  "http://placehold.it/128x128.png/ff0/440?text=Yellow"
];

var imgs = URLs.map(function(URL) {
  var img = new Image();
  img.src = URL;
  document.body.appendChild(img);
  return img;
});

デモ

于 2013-05-30T00:25:25.900 に答える
2

あなたの例では、各画像パス/ファイル名が何であるかを知る何らかの方法が必要です (それらは IMG_001.jpg、002.jpg などではないため)。簡単ですがローテクな方法は、すべてのファイル名を配列にパックして、ソース情報として機能させることです。

//Pack the image filenames into an array using Array shorthand
var imageFiles = ['IMG_0019.jpg', 'IMG_0020.jpg', 'IMG_0021.jpg', 'IMG_0022.jpg'];

次に、その配列内の各要素をループして、それぞれの画像要素を作成します。image 要素を作成し、1 つのステップで最終的な配列にパックします。

//Loop over an array of filenames, and create an image for them, packing into an array:
var pictures = []; //Initialise an empty array

for (var i = 0, j = imageFiles.length; i < j; i++) {
    var image = new Image; //This is a placeholder
    image.src = 'images/' + imageFiles[i]; //Set the src attribute (imageFiles[i] is the current filename in the loop)
    pictures.push(image); //Append the new image into the pictures array
}

//Show the result:
console.log(pictures);

これは効率的ではなく、理解しやすいように書かれたコードです。特に、for (imageFiles の i) はより効率的に実行できますが、このタイプのループの利点は、あらゆるもの (オブジェクト、配列、文​​字列) で使用できることです。これは、学習中の優れた汎用ツールです。for x in yループが問題を引き起こす可能性がある理由については、@Web_designer のリンクされた質問を参照してください。ここでの for ループの構文は、JS の配列ループの「古典的なバニラ」とほぼ同じです。

また、画像ファイル名が常に数値で連続している場合は、それを利用できますが、事前に保存するのではなく、「計算」します。

詳細が必要な場合はお知らせください。

于 2013-05-30T00:29:41.337 に答える
0

Really ugly, but you could use the onload attribute of the image to run a javascript function:

<img id="imgToLoad" onload="loadNextImage();" src="image1.png"/>

And that function could be responsible for loading the next image:

function loadNextImage () {
   document.getElementById( "imgToLoad" ).src = "image2.png";
}
于 2013-05-30T00:32:05.440 に答える