Javascript：通过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>

Answer 1

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.

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

Answer 3

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.

Answer 4

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

Answer 5

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.