How to render preloaded images using JS

Question

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.

It's rather obvious that somewhere in the code you pasted, wrong text is appended to a URL, which is why you see .../members/[object%20HTMLImageElement], a sure sign of wrong object-to-string conversion and most definitely not what you'd expect there. Also, your code snippet is messed up, please put more effort into making sure that's syntactically valid JavaScript -- I am very sure you have duplicate blocks of code there and your brackets do not match up, and I am unable to fix it for you without knowing what the original code you have is. — Armen Michaeli
– Armen Michaeli, Commented Jun 15, 2018 at 9:58
I have corrected your snippet to the best of ability now, you can take a look at it and see if it now looks as it actually does in your page. — Armen Michaeli
– Armen Michaeli, Commented Jun 15, 2018 at 10:00

Alex S. · Accepted Answer · 2018-06-15 10:05:48Z

2

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>
...

edited Jun 15, 2018 at 10:05

answered Jun 15, 2018 at 9:52

Alex S.

6424 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scot Henderson Over a year ago

Came up with solution using .src suggestion and able to reduce code. Script in the head and it was throwing an Uncaught TypeError: Cannot read property 'style' of null so I have kept the call in my start function for it to work.I am currently thinking the onload call starts after the DOM is loaded and that is why there a div to target but if i load it in the head then there is no DOM loaded "DivImage" to access and therefore throws a NULL error. Always glad to hear if I am wrong .. JS is not a strong point and JS was never my strong point. thankyou @Alex S and amn

Alex S. Over a year ago

This error caused likely by calling the function buildImageHTML before DOM loaded. Here is working example how I tested it - jsfiddle.net/6t94qs2f/12

Collectives™ on Stack Overflow

How to render preloaded images using JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related