2012-03-22 165 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