decoding

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

decoding 屬性,適用於 <image> 元素,它向瀏覽器提供一個提示,告知瀏覽器是應該與渲染其他內容一起執行影像解碼,從而實現更“正確”的單次呈現(sync),還是先渲染並呈現其他內容,然後再解碼影像並稍後呈現(async)。實際上,async 意味著下一次繪製不會等待影像解碼完成。

在使用 decoding 屬性處理靜態 <image> 元素時,通常很難察覺到任何明顯的效果。它們很可能最初會被渲染成空白影像,直到影像檔案被獲取(無論是從網路還是從快取中),然後它們會被獨立處理,因此內容更新的“同步”效果不太明顯。然而,解碼過程中造成的渲染阻塞,雖然通常很小,但可以被測量到——即使很難用肉眼觀察到。

當透過 JavaScript 動態將 <image> 元素插入 DOM 時,使用不同的 decoding 型別可以產生更顯著的差異——有關更多詳細資訊,請參閱 SVGImageElement.decoding

允許的值

sync

與渲染其他內容一起同步解碼影像,並一起呈現。

async

非同步解碼影像,在渲染並呈現其他內容之後。

auto

對解碼模式沒有偏好;瀏覽器將決定最適合使用者的方式。這是預設值。

示例

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

瀏覽器相容性

另見