2012-03-22 164 views
0

这是一段来自教程的javascript代码,他们试图将图像加载到画布上,稍后再进行一些操作。我省略了大部分不相关的代码,以使其更易于理解。Javascript:通过Javascript加载图像

1)我不明白为什么包含图像的文件名行始终把下面的imageObj.onload功能。有关系吗 ?图像在什么时候开始加载?

2)如果我忘记放置图像文件的来源会发生什么。

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

       var imageObj = new Image(); 

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

        .... 
        .... 

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

      }; 
     </script> 
+0

你有没有试过不把图像文件的来源看看会发生什么? – 2012-03-22 10:46:10

回答

5

这是一个有点历史问题。从.onload.src开始的顺序并不重要(它在技术上都可以在两个订单上工作),问题是某些浏览器(某些= Internet Explorer)会从缓存中获取映像(如果可用),只要src属性已设置。

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

如果你只是忘记设置src属性,就什么都不会发生在所有。如果您不再持有该对象的任何引用或封闭,它将尽快收集垃圾。

+0

谢谢@jandy .. – 2012-03-22 13:57:22

2

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

在(一些?)旧的浏览器,该处理程序不叫,如果它的属性被设置之后注册的,尤其是如果图像已经在缓存中,因此“装”马上。

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

+0

如果您从'.onload'和'.src'切换顺序,它也适用于所有浏览器。顺序很可能是因为InternetExplorers缓存问题,一旦'.src'被设置,它就会从缓存中获取图像。 – jAndy 2012-03-22 10:49:35

+0

@jAndy请让你评论一个答案,因为这里给出的所有三个答案在这一点上都是错误的。 – Yoshi 2012-03-22 10:50:29

+0

@jAndy是的,这是严格正确的,但我们仍然必须支持旧的MSIE版本,不幸的是:( – Alnitak 2012-03-22 10:51:16

0

当您设置src属性时开始加载。并且img.onload函数将在成功加载图像后调用。

0

改变src触发“装载顺序”,并且由于JS的自然顺序执行,你必须之前注册的处理程序您加载图像。

不改变src不会触发加载顺序。

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

这是回答你的第一个问题后执行。把它放在下面并不意味着,它会在函数2后执行。在JavaScript中,代码从上到下按顺序执行,但函数内部的代码只有在调用该函数时才会执行。

如果你不会给src属性,就没有图像下载,因此功能2不会被调用。

+0

谢谢!这使得它更清晰。 – 2012-03-22 13:58:55