捕捉圖像截斷事件

Question

有沒有辦法捕捉圖像損壞或截斷錯誤並處理它與JavaScript？

我想要在我的網站上顯示多個gif，並將鼠標懸停在動畫功能上。我第一次試圖在懸停時對src屬性進行動畫製作，但那給了我圖像截斷錯誤，並且會導致gif隨機中斷。

爲了解決這個問題，我現在創建一個新的img元素並將其添加到dom中，但是當圖像交換時會導致惱人的「閃爍」。代碼：

var gifs = document.getElementsByClassName("gif"); 

for(var i=0;i<gifs.length;i++){ 
     gifs[i].addEventListener('mouseenter', switchOn, false); 
    } 

var switchOn = function() { 
    var oImg=document.createElement("img"); 
    var parent = this.parentElement; 
    oImg.setAttribute('src', this.dataset.alt); 
    oImg.setAttribute('data-alt', this.src); 

    this.parentNode.removeChild(this); 
    parent.appendChild(oImg); 
    oImg.addEventListener('mouseleave', switchOff, false); 
}; 

var switchOff = function() { 
    var oImg=document.createElement("img"); 
    var parent = this.parentElement; 
    oImg.setAttribute('src', this.dataset.alt); 
    oImg.setAttribute('data-alt', this.src); 

    this.parentNode.removeChild(this); 
    parent.appendChild(oImg); 
    oImg.addEventListener('mouseenter', switchOn, false); 
}; 

Answer 1

無縫切換圖像/ gif/video的常用技術是實際將所有資產元素渲染到DOM，但用CSS隱藏它們。然後，在切換時，只需根據您希望的事件隱藏和顯示CSS。所以在這個例子中，你實際上有兩個DOM元素在彼此之上。一個是默認圖像，另一個是替代圖像。點擊發生時，您將隱藏默認圖像並顯示備用圖像。

閃爍的問題主要是由於您正在設置源，因此在緩存未命中實際上必須下載圖像/ gif /視頻之前，它會顯示任何內容。

這個策略也將解決你的問題與gif的打破。但是，在您首次展示GIF之後，GIF可能會處於循環狀態。這就是爲什麼html5視頻標籤是這種功能更好的選擇，因爲您可以完全控制搜索。