问显示静态图像，但与动画GIF交换一次，如果已加载GIF

EN

function preload(i, img) {
  console.log(img);
  var $img, url, $pre;
  
  $img = $(img);
  
  // incoming <img/> must have a 'data-gif' attribute
  if (! $img || ! $img.data('gif')) {
    return;
  }

  url = $img.data('gif');
  $pre = $('<img />');

  // Set up handler to replace original images's 'src' attribute
  // with the data-gif URL once the replacement is loaded
  $pre.on('load', function() {
    $img.attr('src', url);
  });

  $pre.attr('src', url);
}

$('#images img').each(preload);

#images img {
  width: 320px;
}

#images {
  list-style: none;
}

#images li {
  margin-bottom: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Image preloader test</h1>
<ul id="images">
<li><img src="//placehold.it/960x540/99eeee" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414391/1365600694390/typing.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li>

  <li><img src="//placehold.it/960x540/ee99ee" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414389/1365600692520/reading.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li>

  <li><img src="//placehold.it/960x540/eeee99" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414392/1365600694820/wireframe.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li>

  <li>Broken link: never swaps:<br/><img src="//placehold.it/960x540/999999" data-gif="http://example.com/asfazsdasfd.gif" /></li>

</ul>