CODEWITHSUNDEEP
javascripthtmlimageinnerhtmlpreload
Scot Henderson
Scot Henderson

Reputation: 59

How to render preloaded images using JS

I am stuck with this question and it's been 2 weeks of pain trying to make it work.

I have been able to preload the images when the HTML page loads but I can't access the images and I get the following error:

http://localhost/taskB/html/html/members/[object%20HTMLImageElement] 404 (Not Found) [object%20HTMLImageElement]:1 GET

My code is as follows, the preload function was marked correct but I am unable to work out how to access the array of images:

function preloaded() {
    var itemDesc = setDesc();
    var preload = new Array();
    var loadedimages = new Array();
    var countPreload = 0;
    for (var r = 1; r <= 4; r++) {
        for (var c = 1; c <= 5; c++) {
            preload[countPreload] = "../../images/slices/" + itemDesc + "/" + itemDesc + "_r" + r + "_c" + c + ".jpg";
            countPreload++;
        }
    }
    for (var i = 0; i<preload.length; i++){
        loadedimages[i] = new Image();
        loadedimages[i].src = preload[i];
    }
}

function buildImageHTML() {
    var itemDesc = setDesc(getUrlVars()["description"]);
    var countFile = 0
    var file = new Array();
    // START REDO the images for access
    var preload = new Array();
    var loadedimages = new Array();
    var countPreload = 0;    
    for (var r = 1; r <= 4; r++) {
        for (var c = 1; c <= 5; c++) {
            preload[countPreload] = "../../images/slices/" + itemDesc + "/" + itemDesc + "_r" + r + "_c" + c + ".jpg";
            countPreload++;
        }
    }
    for (var i = 0; i<preload.length; i++) {
        loadedimages[i] = new Image();
        loadedimages[i].src = preload[i];
    }
    //END REDO the images for access
    var writeThis = "";
    writeThis += "<table>";

    //Build Rows then columns
    for (var x = 1; x <= 4; x++) {
        writeThis += "<tr>";
        //Loop through and add five <td> cells to hold the image slices
        for (var y = 1; y <= 5; y++) {
            file = loadedimages[countFile];
            writeThis += "<td><img src=\"" + file + "\"></td>";
            countFile++;
        }
        writeThis += "</tr>";
    }
    writeThis += "</table>";
    var divImageObj = document.getElementById('divImageObject');
    divImageObj.style.display = 'block';
    divImageObj.innerHTML = writeThis;
}

I also have a function called start():

function start() {
    preloaded();
}

I call the start function via the onload event like this:

<body onload="start();">

A requirement is that I must use innerHtml to render the image.

Any pointers here would be great.

Upvotes: 1

Views: 884

Answers (1)

Alex S.
Alex S.

Reputation: 632

loadedimages is array of Image Objects. Use loadedimages[countFile].scr instead.

file = loadedimages[countFile].src;

It's better to call preloaded() from HTML head section. The onload event fires much later, after rendering all page.

<html>
<head>
...
<script>
preloaded();
</script>
</head>
<body>
...

Upvotes: 2

Related Questions