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

我是一名学生，刚刚尝试使用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;

来源

2013-10-24 YWT

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

是无效的。那应该是

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

改为。

此外，虽然这里没有显示，但仅仅分配给window.onload是危险的，因为它可能被覆盖。

来源

2013-10-24 21:44:18

为什么会被覆盖？ – putvande

如果包含多个脚本，那么第二个脚本会覆盖第一个脚本。您必须存储原始处理程序，并在自己的处理程序结束时调用它。 –

-1

你缺少大量引号在你的HTML标记

例子：

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

应该

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

或

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

来源

2013-10-24 21:46:48 Gavin

我怀疑这个问题.. –

这是无效的，但不会破坏代码。 – putvande

如果可以，精心制作如何它没有不工作。是否存在错误（即JavaScript错误）还是行为不符合您的期望（即它看起来什么都不做）？

我会怀疑，在这种情况下，它不做任何事，因为下面的行。

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

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

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

来源

2013-10-24 21:53:22 LeastOne

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

回答

相关问题