Placing Images in Javascript

Question

I had a question about loading images into an array in JS and then appending them to various places to your website.

Let's say I have a folder with 3 images that I'd like to load into an array and then place in this setting

 <body> 

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

Is it possible to load the images, first into a general array, and then put those images within their divs?

Kind of like this? (This code is incorrect)

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]);

do you want to move the images around DOM or load in js and then attach? — Martin
– Martin, Commented Mar 21, 2016 at 14:00
Are the image names always the same, or can they change? Is there a relationship between imageName and divName? — Matthijs
– Matthijs, Commented Mar 21, 2016 at 14:02
I was trying first just to load in JS and then attach to various parts of the website (I had created just some rudimentary css to move the divs to different parts of the page) — Theodore Steiner
– Theodore Steiner, Commented Mar 21, 2016 at 14:04

Özgür Ersil · Accepted Answer · 2016-03-21 14:06:13Z

1

More dynamic way to do it:

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);
};

fiddle [example] https://jsfiddle.net/h1t4vxy6/1/

answered Mar 21, 2016 at 14:06

Özgür Ersil

7,0133 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Theodore Steiner Over a year ago

That's a wonderfully elegant solution. QQ: the last line: div.appendChild(mainImageSelection); If I have the divs in various sections of the website and their placement controlled by css can I fit them to whatever div I want?

Özgür Ersil Over a year ago

exactly @TheodoreSteiner

Theodore Steiner Over a year ago

Thank you so much!

Theodore Steiner Over a year ago

One last thing, you create a separate div at the very end var div=myArr[i] and I get that is holding the array images itself, but then if let's say I wanted to attach image[0] to the mainImage1 Div would i type it out: mainImage1.appendChild(mainImageSelection[0])

Theodore Steiner Over a year ago

I think I've made a booboo somewhere, can you take a peek? jsfiddle.net/theodore_steiner/e92eL0eb

Itamar · Accepted Answer · 2016-03-21 14:04:37Z

1

Just place the following code in a loop, updating the index and 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);

answered Mar 21, 2016 at 14:04

Itamar

1121 silver badge7 bronze badges

Comments

John · Accepted Answer · 2016-03-21 14:23:08Z

0

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>

answered Mar 21, 2016 at 14:23

John

7705 silver badges12 bronze badges

Comments

dr0bz · Accepted Answer · 2016-03-21 14:37:11Z

Here is a solution with a common 'onload' implementation. This way you can add all images at once to the dom, when all of them are loaded. This is a cleaner way to manipulate the 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>

Collectives™ on Stack Overflow

Placing Images in Javascript

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related