如何使用JavaScript在頁面加載中加載圖像？

Question

我是一名學生，剛接觸javascript，嘗試使用javascript將圖像加載到我的網頁上。 我試圖將圖像存儲在一個數組中，並進行for循環以將圖像加載到站點上。 但我似乎無法使其正常工作。 我將發布我的代碼。

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

Answer 1

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

是無效的。 那應該是

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

代替。

另外，盡管未在此處顯示，但僅將其分配給window.onload是危險的，因為它可能會被覆蓋。

Answer 2

如果可以，請詳細說明其不起作用。 是否有錯誤（即JavaScript錯誤）或行為是否不符合您的預期（即似乎無所事事）？

我懷疑在這種情況下，由於以下原因，它什么也沒做。

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

需要將“ src”屬性定義為腳本標簽的一部分。 嘗試將其更改為此。

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

Answer 3

您在html標記中缺少很多引號

例：

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

應該

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

要么

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

如何使用JavaScript在頁面加載中加載圖像？

問題描述

3 個解決方案

解決方案1
4 2013-10-24 21:44:18

解決方案2
0 2013-10-24 21:53:22

解決方案3
-1 2013-10-24 21:46:48

如何使用JavaScript在頁面加載中加載圖像？

問題描述

3 個解決方案

解決方案1 4 2013-10-24 21:44:18

解決方案2 0 2013-10-24 21:53:22

解決方案3 -1 2013-10-24 21:46:48

解決方案1
4 2013-10-24 21:44:18

解決方案2
0 2013-10-24 21:53:22

解決方案3
-1 2013-10-24 21:46:48