如何在使用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加載頁面時加載圖像？

回答

相關問題