Javascript : Loading images via Javascript

Question

This is a chunk of javascript code from a tutorial where they are trying to load an image onto a canvas and do some manipulations later on. I have omitted most of the irrelevant code to make it simpler to understand.

1) I fail to understand why the line containing the filename of the image is always put below the imageObj.onload function . Does it matter ? At what point does the image start getting loaded ?

2) What will happen if I forget to put the source of the image file.

<script>
            window.onload = function(){
                ....

                var imageObj = new Image();

                imageObj.onload = function(){
                    ....
                    ....
                    });

                    ....
                    ....

                };
                imageObj.src = "yoda.jpg";

            };
        </script>

Have you tried not putting the source of the image file to see what will happen? — Neil Knight
– Neil Knight, Commented Mar 22, 2012 at 10:46

jAndy · Accepted Answer · 2012-03-22 10:52:01Z

5

This is a somewhat historical issue. The order from .onload and .src doesn't really matter (it'll work technically on both orders), the issue is that some browsers (some = Internet Explorers) will take the image from the cache if available, as soon as the src attribute is set.

That is why you should always declare an onload handler before setting src.

If you just forget to set the src attribute, just nothing will happen at all. If you don't hold any more references or closures to that object, it will just get garbage collected as soon as possible.

answered Mar 22, 2012 at 10:52

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

Alnitak · Accepted Answer · 2012-03-22 10:52:33Z

2

Loading is triggered by setting the .src property.

On (some?) older browsers, the handler is not called if it's registered after the property is set, especially if the image was already in cache and therefore "loaded" immediately.

If you forget to set the attribute, nothing will ever happen.

edited Mar 22, 2012 at 10:52

answered Mar 22, 2012 at 10:46

Alnitak

341k72 gold badges420 silver badges503 bronze badges

3 Comments

jAndy Over a year ago

It'll also work in all browsers if you switch the order from .onload and .src. The order is most likely because of caching issues with InternetExplorers, which take the image from the cache as soon as .src is beeing set.

Yoshi Over a year ago

@jAndy please make you comment an answer, because all three answers given here are wrong regarding that point.

Alnitak Over a year ago

@jAndy yes, that's strictly correct, but we do still have to support old MSIE versions, unfortunately :(

Jashwant · Accepted Answer · 2012-03-22 10:58:18Z

window.onload = function(){
                // This is function 1 
                // This portion will execute when window has loaded completely.
                // In simple words, page has been downloaded completely.

                var imageObj = new Image();

                imageObj.onload = function(){
                    // This is function 2
                   // This portion will execute when image has loaded completely 
                    });

                    ....
                    ....

                };
                imageObj.src = "yoda.jpg";

So, function 1 and function 2 will execute after this line imageObj.src = "yoda.jpg";

This is answer to your first question. Putting it below does not means, it will execute after function 2. In javascript, code executes sequentially from top to bottom, but code inside functions will only execute when that function is called.

If you wont give src attribute, there would be no image to download, and thus function 2 wont get called.

deadrunk · Accepted Answer · 2012-03-22 10:47:50Z

0

Loading starting when you set src attribute. And img.onload function will be called after successful loading of the image.

answered Mar 22, 2012 at 10:47

deadrunk

14.2k4 gold badges33 silver badges29 bronze badges

Comments

Joseph · Accepted Answer · 2012-03-22 10:49:08Z

0

changing the src triggers the "loading sequence", and due to the nature of JS to sequentially execute, you must register the handler before you load the image.

not changing the src will not trigger the loading sequence.

answered Mar 22, 2012 at 10:49

Joseph

120k31 gold badges186 silver badges238 bronze badges

Collectives™ on Stack Overflow

Javascript : Loading images via Javascript

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related