Javascript 捕获图像截断事件

有没有办法捕获图像损坏或被截断的错误并用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);
};

var gifs=document.getElementsByClassName（“gif”）；
对于（var i=0；i无缝切换图像/gif/视频的常用技术是将所有资产元素渲染到DOM中，但使用CSS隐藏它们。然后在切换时，您只需根据所需事件使用CSS隐藏和显示。因此，在本例中，您实际上会有两个DOM元素相互重叠。一个是默认图像，另一个是这是备用图像。单击时，隐藏默认图像并显示备用图像

闪烁的问题主要是由于您正在设置源，在缓存未命中时，实际上必须先下载图像/gif/视频，然后才能显示任何内容

此策略还将解决gif中断的问题。但是gif在您首次显示后很可能处于循环中。这就是为什么html5视频标记是此类功能的更好选项，因为您可以完全控制搜索