我正在嘗試加載具有淡入效果的影像，該效果將在影像加載后觸發。我注意到它onload在 Chrome 中正常作業，但在 Firefox 或 Safari 中，它在渲染影像前幾百毫秒被呼叫，因此將跳過該持續時間以下的任何影片。
我一直在閱讀其他問題，如：
image.onload 事件和瀏覽器快取：沒有用，因為它不是快取問題，因為影像總是新的；
<img> 標簽中的 onl oad 事件在 Firefox 中過早觸發，而不是在其他瀏覽器中：在這個問題中指出Firefox 存在 onl oad 問題，這是在加載開始而不是加載結束時觸發的；但在我們的例子中
onload是在影像加載結束時正確觸發的；這是加載完成后呈現的影像。
在這里，我創建了一個片段來演示使用Picsum重影像 —3000 x 3000 — 的問題。在 Chrome 上打開此問題并運行此代碼段時，加載時影像會變淡；但是當在 Firefox 或 Safari 上打開同樣的問題時，影像會在沒有淡入的情況下呈現。
const imgElement = new Image();
const rootElement = document.getElementById("root");
rootElement.append(imgElement);
imgElement.className = "image";
imgElement.src = "https://picsum.photos/3000/3000";
imgElement.onload = function () {
imgElement.classList.add("loaded");
};.image {
border: 2px solid gray;
max-width: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.image.loaded {
opacity: 1;
}<div id="root"></div>歡迎任何想法！
uj5u.com熱心網友回復：
是的，加載事件確實對應于獲取網路資源的時間以及瀏覽器確保它能夠毫無問題地讀取它的時間。
那是 Firefox 和 Safari 根據規范觸發事件的時候。
Chrome 當前在觸發此事件之前會做更多的作業，因為它們會等到完全解碼完成。
因此，正如您正確猜測的那樣，Safari 和 Firefox 將首先將<img>元素渲染為空，然后在該空影像上應用過渡，然后僅渲染最終影像。
為了解決這個問題，您可以使用 HTML 規范中相對較新的補充：HTMLImageElement#decode()。此方法將回傳一個 Promise，在解碼部分完成后進行決議。
const imgElement = new Image();
const rootElement = document.getElementById("root");
rootElement.append(imgElement);
imgElement.className = "image";
imgElement.src = "https://picsum.photos/3000/3000";
imgElement.decode().then(()=>{
imgElement.classList.add("loaded");
});.image {
border: 2px solid gray;
max-width: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.image.loaded {
opacity: 1;
}<div id="root"></div>Ps：對于那些需要支持不支持的舊瀏覽器的decode()，有一種方法可以強制同步解碼。
uj5u.com熱心網友回復：
理想情況下，
window.load在將影像標簽附加到 DOM 之前，您應該等待事件onloadimgElement應在imgElement加載或附加到 DOM之前設定處理程式
通過這些更改并使影片持續時間從 0.3 秒變為 3 秒（以便于觀察），瀏覽器的行為是一致的。
window.addEventListener("load", () => {
const imgElement = new Image();
const rootElement = document.getElementById("root");
imgElement.onload = function () {
imgElement.classList.add("loaded");
};
rootElement.append(imgElement);
imgElement.className = "image";
imgElement.src = "https://picsum.photos/3000/3000";
});.image {
border: 2px solid gray;
max-width: 100%;
opacity: 0;
transition: opacity 3s ease;
}
.image.loaded {
opacity: 1;
}<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/398329.html
標籤：javascript 图片 火狐 苹果浏览器 负载
上一篇：從同一個父類的另一個類訪問物件