decoding
decoding 屬性,適用於 <image> 元素,它向瀏覽器提供一個提示,告知瀏覽器是應該與渲染其他內容一起執行影像解碼,從而實現更“正確”的單次呈現(sync),還是先渲染並呈現其他內容,然後再解碼影像並稍後呈現(async)。實際上,async 意味著下一次繪製不會等待影像解碼完成。
在使用 decoding 屬性處理靜態 <image> 元素時,通常很難察覺到任何明顯的效果。它們很可能最初會被渲染成空白影像,直到影像檔案被獲取(無論是從網路還是從快取中),然後它們會被獨立處理,因此內容更新的“同步”效果不太明顯。然而,解碼過程中造成的渲染阻塞,雖然通常很小,但可以被測量到——即使很難用肉眼觀察到。
當透過 JavaScript 動態將 <image> 元素插入 DOM 時,使用不同的 decoding 型別可以產生更顯著的差異——有關更多詳細資訊,請參閱 SVGImageElement.decoding。
允許的值
示例
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image
href="https://example.com/mdn_logo_dark.png"
height="200"
width="200"
decoding="async" />
</svg>
規範
| 規範 |
|---|
| HTML # dom-img-decoding |
瀏覽器相容性
載入中…
另見
- SVGImageElement: decoding 屬性
- What does the image decoding attribute actually do? (tunetheweb.com, 2023)