如何使用Javascript在页面加载时加载图像?

时间:2013-10-24 21:41:13

标签: javascript html image

我是一名学生,并且是javascript尝试使用javascript在我的网页上加载图片的新手。我试图将图像设置为一个数组并制作循环,以便在网站上加载图像。但我似乎无法使其发挥作用。我会发布我的代码。

<!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;

3 个答案:

答案 0 :(得分:4)

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

无效。那应该是

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

代替。

此外,尽管此处未显示,但只是分配给window.onload是危险的,因为它可能会被覆盖。

答案 1 :(得分:0)

如果可以的话,详细说明它是如何起作用的。是否存在错误(即JavaScript错误)或行为不符合您的预期(即看似无效)?

我怀疑在这种情况下,由于以下行,它没有做任何事情。

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

需要将“src”属性定义为脚本标记的一部分。尝试将其更改为此。

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

答案 2 :(得分:-1)

你的html标记中缺少很多引号

示例:

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

应该是

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

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