Question

我正在构建一个拥有许多大型（800KB）动画GIF的网站。我还有我最初计划展示的每个GIF的第一帧，然后在加载后将它交换到动画GIF。这样，网站最初看起来仍然很好。

我目前在图片代码中存储GIF网址为＆＃34; data-gif =＆＃39; blah.gif＆＃39;＆＃34;。然后我可以使用jQuery迭代这些来获取GIF URL。

现在我不确定如何在后台加载这些内容并获取加载时的事件。

Answer 1

你想要一个＆＃34;图像预加载器＆＃34;。这是一个让您入门的示例，但我建议您搜索一个更多考虑处理边缘情况的库。

＆＃13;

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);

＆＃13;

#images img {
  width: 320px;
}

#images {
  list-style: none;
}

#images li {
  margin-bottom: 2rem;
}

＆＃13;

<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>

＆＃13;

显示静态图像，但如果完全加载，则在GIF时与动画GIF交换

1 个答案: