How can I load images on page load with Javascript?

Question

I'm a student and new to javascript trying to load the images on my webpage using javascript. I tried to put the image sorce in an array and made for loop that would load images on the the site. But i can't seem to make it work. I'll post my code.

<!DOCTYPE html>
<html>
<head>
<title> Lucky lottery</title>
<link rel="stylesheet" href="theme.css">
<script> src = "imageLoader.js"</script>

</head>
<body>
<div id='container'>
<div id='header'>

    <div id=title><h1 id='titlehead'> Lucky Lottery</h1></div>

</div>

<div id=gallery>

    <div class=images id=image_0></div>
    <div class=images id=image_1></div>
    <div class=images id=image_2></div>
    <div class=images id=image_3></div>
    <div class=images id=image_4></div>
    <div class=images id=image_6></div>
    <div class=images id=image_7></div>
    <div class=images id=image_8></div>

</div>
<div id=subfooter>
    <div class=input>Please fill in your name</div>
    <div id=win_btn><a href="message.js" class="button2">win </a></div>

</div>
<div id=footer>
    <p>

    <h2> Please Sign Up for only 10 dollars. Maybe you
        win one of the amazing products. </h2></p>

</div>

JavaScript:

function imageLader() {
    var imageLijst = ["../images/melk.png", "../images/wasmiddel.png", "../images/bike.png", "../images/holiday.png", "../images/lego-starwars.png",
        "../images/electrische-tandenborstel.png", "../images/my-little-pony.png", "../images/wii-u.png"];

    for(var i = 0; i <imageLijst.length; i++) {
         var imgDiv = document.getElementById("image_"+ i);
         var img = new Image();
         img.src = imageLijst [i];
         imgDiv.appendChild(img);
    }
}

window.onload = imageLader;

Steven Don · Accepted Answer · 2013-10-24 21:44:18Z

4

<script> src = "imageLoader.js"</script>

is invalid. That should be

<script src="imageLoader.js"></script>

instead.

Also, though not shown here, just assigning to window.onload is dangerous, as it may be overwritten.

answered Oct 24, 2013 at 21:44

Steven Don

2,44115 silver badges14 bronze badges

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

2 Comments

putvande Over a year ago

Why can it be overwritten?

Steven Don Over a year ago

If multiple scripts are included which do that, the second just overwrites the first. You'd have to store the original handler and call it at the end of your own handler.

LeastOne · Accepted Answer · 2013-10-24 21:53:22Z

0

If you can, elaborate on how its not working. Is there an error (i.e. a JavaScript error) or is the behavior not as you expect (i.e. it appears to be doing nothing)?

I would suspect that in this instance its not doing anything because of the following line.

<script> src = "imageLoader.js"</script>

The "src" attribute needs to be defined as a part of the script tag. Trying changing it to this.

<script type="text/javascript" src="imageLoader.js"></script>

answered Oct 24, 2013 at 21:53

LeastOne

3885 silver badges14 bronze badges

Comments

Gavin · Accepted Answer · 2013-10-24 22:03:16Z

-1

You are missing lots of quotation marks in your html markup

Example:

<div class=images id=image_0></div>

should be

<div class="images" id="image_0"></div>

or

<div class='images' id='image_0'></div>

edited Oct 24, 2013 at 22:03

answered Oct 24, 2013 at 21:46

Gavin

2,1531 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

How can I load images on page load with Javascript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related