title: Catch image truncation event
body: <p>Is there a way to catch the image corrupt or truncated error and handle it with javascript?</p>
  
  <p>I have multiple gifs I'm trying to show on my website with a hover to animate feature. I first tried to just animate the src attribute on hover, but that was giving me image truncation errors, and would causes gifs to randomly break.</p>
  
  <p>To try to get around that I am now creating a new img element and appending it to the dom, but this results in an annoying "flicker" when the images swap. code:</p>
  
  <pre><code>var gifs = document.getElementsByClassName("gif");
  
  for(var i=0;i&lt;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);
  };
  </code></pre>