Javascript: image object -> HTML image element

Question

The code preloads an image into an image object and then (supposed to) set it to the image element src on HTML:

<!DOCTYPE html>
<html>
  <head>
    <script language="javascript">
        window.onload = function () {
            var oImage = new Image();
            oImage.onload = function () {
                document.getElementById('myImage').src = oImage;
                alert('done');
            };
            oImage.src = 'image1.jpg';
        }
    </script>
  </head>
  <body>
    <img id="myImage" src="" />
  </body>
</html>

Why it doesn't work?

Where is your 'image1.jpg' located? Is it in the same folder as your HTML file? — Marvin Brouwer
– Marvin Brouwer, Commented Jan 6, 2014 at 16:27

Abraham Hamidi · Accepted Answer · 2014-01-06 16:39:25Z

6

Try

<!DOCTYPE html>
<html>

<head>

    <script language="javascript">
        window.onload = function () {

            var oImage = new Image();

            oImage.onload = function () {
                document.getElementById('myImage').src = oImage.src;
                alert('done');

            };

            oImage.src = 'image1.jpg';
        };
    </script>

</head>

<body>
    <img id="myImage" src="" />
</body>

</html>

You can't set a src to an image, you have to set it to the image's src. (PS: Added semicolon at the end and changed .src = oImage to .src = oImage.src)

DEMO

edited Jan 6, 2014 at 16:39

answered Jan 6, 2014 at 16:29

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

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

7 Comments

Marvin Brouwer Over a year ago

Yes, this is the solution. I've just discovered this in my fiddle: jsfiddle.net/Y2nPc/2

Azevedo Over a year ago

Well, it works. But using the .src won't it be loading the image again? I mean, isn't it the same as document.getElementById('myImage').src='image1.jpg'? The purpose is to load a bunch of images in advance. (prelodaing)

Marvin Brouwer Over a year ago

Browsers usually save all loaded images locally after loading them once to prevent reloading images every time you load a page within a website. And preloading an image using JavaScript just adds the image to that local directory. Your browser should do the rest. Also during the session your JavaScript image is loaded in the browser cache.

Abraham Hamidi Over a year ago

Lol, my fiddle was wrong; it was wrapped in a window.onload. Use this: jsfiddle.net/xPHyb/1

Azevedo Over a year ago

@MarvinBrouwer , in my case for example... all browsers here are set to store 0 cache on disk. But I think the browser will have it preloaded it in RAM anyway...

|

Collectives™ on Stack Overflow

Javascript: image object -> HTML image element

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related