具有相同src的三个gif，仅重新加载其中一个

华金·迪亚兹（Joaquin Diaz）

所以我有三张图片，上面有一张gif：

<div class="cards_item">
    <div class="cards_item-imgs">
        <img id="cardAnimationOne" src="assets/images/iso.gif" alt="">
        <img src="assets/images/online-icon.png" alt="">
    </div>
</div>
<div class="cards_item">
    <div class="cards_item-imgs">
        <img id="cardAnimationTwo" src="assets/images/iso.gif" alt="">
        <img src="assets/images/gestion-icon.png" alt="">
    </div>
</div>
<div class="cards_item">
    <div class="cards_item-imgs">
         <img id="cardAnimationThree" src="assets/images/iso.gif" alt="">
         <img src="assets/images/integrar-icon.png" alt="">
    </div>
</div>

如果鼠标在图像上，我有一个重新加载gif的函数：

$('#cardAnimationOne').on('mouseenter', function(){     
  $('#cardAnimationOne').prop('src', '');
  $('#cardAnimationOne').prop('src', 'assets/images/iso.gif');
});

我想随时在鼠标上重新加载/重新触发每个（因此每个图像都有这些功能之一，并且出于测试/调试的目的，我只启用第一个）。我的问题是，尽管我只是选择第一个，但上面的JS会重新加载所有三个gif。

通过使用不同的名称保存gif三次，我找到了解决方案。在这种情况下，功能按每个图像的预期目的工作。

我的问题是：src即使我只编码一个要重新加载的图像，如果它们共享相同的图像，为什么还要重新加载/触发所有图像？

克隆克斯

如果所有URL都相同，则某些浏览器（或全部？）将使GIF保持同步。我不知道这是有记录的还是特定的行为。

正如您所发现的那样，使GIF分开移动的最简单方法是为每个GIF使用唯一的URL，但是每次希望它出现时都为该文件创建一个副本可能不切实际。而是可以添加URL参数。这将使URL在浏览器中看起来是唯一的，但对GIF无效。

<div class="cards_item">
    <div class="cards_item-imgs">
        <img id="cardAnimationOne" src="assets/images/iso.gif?whatevertextyouwant=1" alt="">
        <img src="assets/images/online-icon.png" alt="">
    </div>
</div>
<div class="cards_item">
    <div class="cards_item-imgs">
        <img id="cardAnimationTwo" src="assets/images/iso.gif?whatevertextyouwant=2" alt="">
        <img src="assets/images/gestion-icon.png" alt="">
    </div>
</div>
<div class="cards_item">
    <div class="cards_item-imgs">
         <img id="cardAnimationThree" src="assets/images/iso.gif?whatevertextyouwant=3" alt="">
         <img src="assets/images/integrar-icon.png" alt="">
    </div>
</div>

从理论上讲，您也可以这样做：

let GifLoadingNumber = 0;

$('#cardAnimationOne').on('mouseenter', function(){
  $('#cardAnimationOne').prop('src', 'assets/images/iso.gif?whatevertextyouwant=' + GifLoadingNumber);
  GifLoadingNumber++;
});

...但是在我的测试中，Chrome尝试了几次后就停止从缓存中加载它，并且每次都开始从服务器中加载它，这使其重置两次（一次是在鼠标移过它时立即重置，第二次是大约半秒）稍后从服务器加载测试GIF时）。

我的考试很简单。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。