Javascript :通过Javascript加载图像

Question

这是教程中的一段javascript代码，在教程中，他们试图将图像加载到画布上，然后进行一些操作。为了让它更容易理解，我省略了大部分不相关的代码。

1)我不明白为什么包含图片文件名的那一行总是放在imageObj.onload函数的下面。这有关系吗？从什么时候开始加载图像？

2)如果我忘记放入镜像文件的源文件，会发生什么情况？

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

                var imageObj = new Image();

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

                    ....
                    ....

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

            };
        </script>

Answer 1

这在某种程度上是一个历史问题。来自.onload和.src的顺序并不重要(从技术上讲，这两种顺序都有效)，问题是，一旦设置了src属性，一些浏览器(有些= Internet Explorers)将从缓存中获取图像。

这就是为什么在设置src之前总是应该声明一个onload处理程序。

如果您只是忘记设置src属性，那么什么都不会发生。如果您不再持有对该对象的任何引用或闭包，它将尽快被垃圾回收。

Answer 2

加载是通过设置.src属性触发的。

在(一些？)在较早的浏览器中，如果处理程序是在设置属性之后注册的，则不会调用该处理程序，特别是如果图像已经在缓存中，因此会立即“加载”。

如果您忘记设置该属性，则不会发生任何事情。

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";

因此，函数1和函数2将在此行imageObj.src = "yoda.jpg";之后执行

这是你第一个问题的答案。在javascript中，代码从上到下依次执行，但函数内部的代码只有在调用该函数时才会执行。

如果你不给出src属性，就没有图片可供下载，因此函数2也不会被调用。