Question

我有一个关于在JS中将图像加载到数组中然后将它们附加到您网站的各个位置的问题。

假设我有一个包含3个图像的文件夹，我想将其加载到数组中，然后放入此设置

 <body> 

    <div id = "mainImage1"></div>             
    <div id = "mainImage2"></div>             
    <div id = "mainImage3"></div>             
</body>

是否可以将图像加载到一般数组中，然后将这些图像放入其div中？

有点像这样吗？（此代码不正确）

var mainImage1 = document.getElementById("mainImage1");
var mainImage2 = document.getElementById("mainImage2");
var mainImage3 = document.getElementById("mainImage3");

var mainImageSelection = new Image();

mainImageSelection.src = "Images/" + mainImageSelection[i];

mainImage1.appendChild(mainImageSelection[0]);
mainImage2.appendChild(mainImageSelection[1]);

Answer 1

只需将以下代码放在循环中，更新索引和div id：

var elem = document.createElement("img");
elem.setAttribute("src", "Images/" + mainImageSelection[0]);
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("mainImage1").appendChild(elem);

Answer 2

更有活力的方式：

var mainImage1 = document.getElementById("mainImage1");
var mainImage2 = document.getElementById("mainImage2");
var mainImage3 = document.getElementById("mainImage3");
var myArr = [mainImage1,mainImage2,mainImage3];
var images = ["https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg","https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg","https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"]

for(var i=0;i<myArr.length;i++){
var mainImageSelection = new Image();
    mainImageSelection.src = images[i];
    var div = myArr[i];
    div.appendChild(mainImageSelection);
};

小提琴[例] https://jsfiddle.net/h1t4vxy6/1/

Answer 3

var imgArr = [];

var myImg = new Image();
myImg.src = "http://jstsolutions.net/wp-content/themes/realty/lib/images/key_img2.png";
imgArr.push(myImg);

$("body").append(imgArr[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

这是一个具有常见“onload”实现的解决方案。通过这种方式，您可以将所有图像一次性添加到dom中，同时加载所有图像。这是一种操作dom的更简洁方法。

var imageUrls = ['https://lh3.googleusercontent.com/MiUKb7zmiGyTbZDYl-GcqhwwgYKQTef6GlbqD8M09Iee4HKo-eZ_elDaDZWIjPt-QP6JdKmZb9gDlMd_rgOBsoKgdzpHneXqTA0IrSDl', 'https://lh3.googleusercontent.com/1I-SpxfmclQuLzrEeuVSskbwgcgDKrlTex_Lr7P9w_jpyyz-cblCIWhBaaotiTtZER30AheCW7TZLJebadC39_pCgxzcWQnwTQf01Gtz', 'https://lh3.googleusercontent.com/q9RXNZmgMHFxFCPX9iweCHhQsacan7g0_bswUe_GOy0W53iSeOxnLXcGkGUWPyR5K-qQBv7MtHEm-Ddzl0ja9C7L790P67LhTjGDJso'];
var images = [];

var loadedImages = 0;

function onLoad() {
  loadedImages++;
  if (loadedImages === imageUrls.length) {
    onAllImagesLoaded();
  }
}

function onAllImagesLoaded() {
  var imagesContainer = $('.images');
  images.forEach(function(element, index) {
    imagesContainer.append(element);
  });
}

imageUrls.forEach(function(element, index) {
  var image = new Image();
  image.src = element;
  image.onload = onLoad;
  images.push(image);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">

</div>

在Javascript中放置图像

4 个答案: