js 使用image.height和image.width获取图片宽高值为0，获取失败

左手的ㄟ右手 2022-05-23 07:51 373阅读 0赞

当我使用javascript创建一个图片对象：

我以为可以这样获取图片的宽高值：

<table style="font-size:12px;margin-left:0px;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;background:none;width:auto;border-spacing:0px;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;border-style:none;padding:0px;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;padding:0px;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:16px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:830px;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;padding:0px;vertical-align:top;margin:0px;"> 
    <div style="padding:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;line-height:16px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.src"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">src</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">var</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.height"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.naturalHeight"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">naturalHeight</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">var</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.width"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.naturalWidth"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">naturalWidth</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;">
       &nbsp; 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在某些电脑上的谷歌浏览器和IE11浏览器上，以上代码工作正常。但是火狐在第一次打开时却报出宽高值均为`0`。如果按F5刷新页面，火狐又能正确获取宽高值了。按Ctrl+F5忽略缓存的话，仍能复现这个问题。

这是因为火狐对于JS异步运行非常快。当载入`image.src = "apple.jpg";`时，火狐已经开始运行`var height = image.height;`了。而且这与DOM无关，完全是**javascript**和**浏览器**的问题。

这个问题也与图片不大相关。你可以用一个BASE64编码的src做实验，结论相同。

--------------------

使用`image.onload`避免这个问题。

<table style="font-size:12px;margin-left:0px;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;background:none;width:auto;border-spacing:0px;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;border-style:none;padding:0px;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;padding:0px;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:16px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-right:1px solid rgb(222,222,222);border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       11 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:830px;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;padding:0px;vertical-align:top;margin:0px;"> 
    <div style="padding:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;line-height:16px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">onload</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.src"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">src</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">var</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.height"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">height</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.naturalHeight"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">naturalHeight</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">var</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.width"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">width</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">console</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">log</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"image.naturalWidth"</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">naturalWidth</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;">
       &nbsp; 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

你可以使用`test.html`中的代码来测试结果。

--------------------

注意不仅仅是火狐有这个问题，Chrome和IE11都有这个问题。我在自己的电脑上执行以上代码，发现得到的结果与在公司电脑上执行的结果完全不同。

在我自己的电脑上，所有浏览器在没有`image.onload`的情况下都返回`0`。谷歌浏览器即使在页面和图片都缓存了的情况下也返回`0`，而IE11返回`0`或者正确值的情况随机。

所以当你需要获取图片信息时，记得使用事件`image.onload`来保证结果正确。