admin管理员组

文章数量:1323730

EDIT : Here's another problem: I can't define each picture's Z-index with the for loop.

function placeImage(x) {
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter = 1; counter <= x; counter++ ) {
        var image = document.createElement("img");
        image.src = "borboleta/Borboleta" + counter + ".png";
        image.width = "195";
        image.height = "390";
        image.alt = "borboleta" + counter;
        image.id = "imagem" + counter;
        image.position = "relative";
        image.style.zIndex = counter;
        div.appendChild(image);
    }
};

window.onload = function () {
    placeImage(20);
};

<body>
    <div id="div_wrapper">
        <div id="div_header">
            <h1>First Project</h1>
        </div>
        <div id="div_picture">
            <div id="div_picture_left"></div>
            <div id="div_picture_right"></div>
        </div>
    </div>
</body>

When checking FireBug, I get this:

Error: image corrupt or truncated

EDIT : Here's another problem: I can't define each picture's Z-index with the for loop.

function placeImage(x) {
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter = 1; counter <= x; counter++ ) {
        var image = document.createElement("img");
        image.src = "borboleta/Borboleta" + counter + ".png";
        image.width = "195";
        image.height = "390";
        image.alt = "borboleta" + counter;
        image.id = "imagem" + counter;
        image.position = "relative";
        image.style.zIndex = counter;
        div.appendChild(image);
    }
};

window.onload = function () {
    placeImage(20);
};

<body>
    <div id="div_wrapper">
        <div id="div_header">
            <h1>First Project</h1>
        </div>
        <div id="div_picture">
            <div id="div_picture_left"></div>
            <div id="div_picture_right"></div>
        </div>
    </div>
</body>

When checking FireBug, I get this:

Error: image corrupt or truncated

Share Improve this question edited Apr 15, 2018 at 17:03 Machavity 31.7k27 gold badges95 silver badges105 bronze badges asked Feb 6, 2013 at 10:18 user1925416user1925416 531 silver badge4 bronze badges 5
  • 2 Do you have a div with an ID of div_picture_right? Also check if your code executes before the div exists on the page. Use window.onload to prevent that. – MrCode Commented Feb 6, 2013 at 10:20
  • I edited the code like you said. I'll try that. – user1925416 Commented Feb 6, 2013 at 10:27
  • place your js at the end of the file else write defer="defer" to your <script> tag – asifsid88 Commented Feb 6, 2013 at 10:33
  • @user1925416 see my answer for how to use window.onload properly, you aren't using it quite right. – MrCode Commented Feb 6, 2013 at 10:34
  • Yes you cannot pass counter number to the window.onload function @MrCode is right – asifsid88 Commented Feb 6, 2013 at 10:36
Add a ment  | 

3 Answers 3

Reset to default 4

Looks like your code is executing before the div exists on the page. You shouldn't try to get a handle on an element in the DOM until it is fully loaded. You can define your function outside of window.onload, but keep your call within window.onload, example:

function placeImage(x)
{
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter=1;counter<=x;counter++) {
        var imagem=document.createElement("img");
        imagem.src="borboleta/Borboleta"+counter+".png";
        div.appendChild(imagem);
    }
}

window.onload = function() {
    placeImage(48);
};

I also added a small improvement which is to get the handle on the div and store in a variable once, instead of getting a new handle on each iteration.

Try this:

var placeImage = function(x) {
var img="";
for (var counter = 1; counter <= x; counter++ ) {
     img += '<img src="borboleta\Borboleta'+counter+'.png" alt="" />';
}
    document.getElementById("div_picture_right").innerHTML = img;
};

placeImage(48);

With this code, there's only 1 DOM operation rather than 48. Also make sure if you have an element with the said ID (div_picture_right).

If you want to change the divs' z-index dynamically, set their position attribute to "absolute" instead of "relative". It makes more sense that way.

本文标签: Placing multiple images in HTML at once with JavaScriptStack Overflow