SVGImageElement: decode() method
Baseline
2025
Newly available
Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Phương thức decode() của giao diện SVGImageElement khởi tạo quá trình giải mã hình ảnh bất đồng bộ, trả về một Promise được giải quyết khi hình ảnh đã được giải mã và có thể an toàn thêm vào DOM.
Cú pháp
decode()
Tham số
Không có.
Giá trị trả về
Một Promise được hoàn thành với undefined khi dữ liệu hình ảnh sẵn sàng để sử dụng, chẳng hạn như thêm vào DOM, thay thế hình ảnh hiện có, v.v.
Ngoại lệ
Không có.
Ví dụ
Trong ví dụ dưới đây, bạn có thể thấy hình ảnh trống trên trang trong khi hình ảnh đang được tải xuống:
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const img = document.createElementNS(SVG_NS, "image");
img.src = "img/logo.svg";
svg.appendChild(img);
Sử dụng decode() sẽ trì hoãn việc chèn hình ảnh vào DOM cho đến khi nó được tải xuống và giải mã hoàn toàn, tránh vấn đề hình ảnh trống:
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
async function getImage() {
const img = document.createElementNS(SVG_NS, "image");
img.src = "img/logo.svg";
await img.decode();
svg.appendChild(img);
const text = document.createElementNS(SVG_NS, "text");
text.textContent = "Image is fully loaded!";
svg.appendChild(text);
}
Điều này đặc biệt hữu ích nếu bạn đang hoán đổi động một hình ảnh hiện có với một hình ảnh mới, và cũng ngăn các lần vẽ không liên quan bên ngoài code này bị giữ lại trong khi hình ảnh đang giải mã.
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-img-decode-dev |
Tương thích trình duyệt
Xem thêm
HTMLImageElement.decode(): Tương tự, nhưng dành cho các phần tử HTML<img>- What does the image decoding attribute actually do? trên tunetheweb.com (2023)