Is that a way to do it better? [JS]

Question

Hello, I'm not an advanced programmer, and I have created a simple dynamically changing information display.

<div id="oculus">
<p id="default">Click the position on the list to display informations!</p>
<a href="" target="blank_" id="link">Wiki</a>
<img src="" id="image" align="center">
</div>

And JS is changing innerHTML, href and src of these using onclick event. The problem is, that images are loading slowly. Is there a way to load images before displaying f.e. using onload event?

Answer 1

check out this
http://stackoverflow.com/questions/14373683/how-to-show-image-only-when-it-is-completely-loaded

Answer 2

// you can load image into cache on window onload
var img = new Image();
img.src = "http://path/img.jpg";

// set it to img src later whenever needed
x = document.getElementById("later");
x.src = img.src;

Answer 3

hope this coding can help..
https://code.sololearn.com/WXHUApnqKBUq/?ref=app

Answer 4

Try to compare the cache image with normal load image from this link:
https://code.sololearn.com/WayQI3dBpmtA/?ref=app

The image is HD image, you can wait for the cache image loaded (it would takes 10-20 seconds to load, depends on the internet speed) and trigger the button to see the instant large image loading from cache.

Answer 5

Oh, and I don't want to do different <img> tags and display: none; these, because that would have been hilarious .-.

Answer 6

No, no, I'm looking for a way to load an image on page load when it's not actually on page, not displaying it only after loading ^^