html - Javascript : Loading images via Javascript- Stack Overflow

admin管理员组

文章数量:1290947

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>

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>

• javascript
• html
• image

Share Improve this question Follow asked Mar 22, 2012 at 10:44 geeky_monstergeeky_monster 8,8021818 gold badges5858 silver badges8787 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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.

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

                var imageObj = new Image();

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

                    ....
                    ....

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

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

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.

本文标签： htmlJavascriptLoading images via Javascript Stack Overflow