Question

有没有办法捕获图像损坏或截断错误并使用javascript处理它？</ p>

我有多个GIF，我试图在我的网站上显示悬停到动画功能。我首先尝试在悬停时设置src属性的动画，但是这给了我图像截断错误，并且会导致GIF随机中断。

为了试图解决这个问题，我现在正在创建一个新的img元素并将其附加到dom，但这会导致烦人的＆＃34;闪烁＆＃34;当图像交换。代码：

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 /视频无缝切换的常用技术是将所有资产元素实际渲染为DOM，但使用CSS隐藏它们。然后在切换时，您只需根据所需事件隐藏并显示CSS。因此，使用此示例，您实际上将两个DOM元素放在一起。一个是默认图像，另一个是备用图像。当发生单击时，您隐藏默认图像并显示备用图像。

你的闪烁问题主要是因为你正在设置源，在缓存未命中实际上必须下载image / gif / video才会显示任何内容。

此策略还可以解决您的gif打破问题。然而，在您第一次显示它们之后，GIF很可能会处于循环中。这就是为什么html5视频标签是这种功能的更好选择，因为你可以完全控制搜索。

捕获图像截断事件

1 个答案: