CODEWITHSUNDEEP
javascripthtmlimage
ywtstewart
ywtstewart

Reputation: 11

How can I load images on page load with Javascript?

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;

Upvotes: 0

Views: 117

Answers (3)

Gavin
Gavin

Reputation: 2143

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>

Upvotes: -1

LeastOne
LeastOne

Reputation: 388

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>

Upvotes: 0

Steven Don
Steven Don

Reputation: 2431

<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.

Upvotes: 4

Related Questions