[分享]css再次加载gif没动画

最近在开发一个网页时遇到了一个问题，就是在css再次加载gif图片时，图片没有动画效果。经过一番搜索，我找到了解决方法。 / 原本的CSS代码 / .loadinggif { backgroundi...

最近在开发一个网页时遇到了一个问题，就是在css再次加载gif图片时，图片没有动画效果。经过一番搜索，我找到了解决方法。

  /* 原本的CSS代码 */
        .loading-gif {
            background-image: url(loading.gif);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        /* 重新加载时，改变url后缀 */
        .loading-gif.reloading {
            background-image: url(loading.gif?v=1);
        } 

解决方法就是在重新加载时，改变url后缀。因为浏览器会缓存之前加载过的图片，再次加载时会优先读取缓存中的图片，因此我们需要通过改变url后缀，让浏览器重新加载图片。

如上所示，我们在原本的css代码后加入了一个名为reloading的class，该class只用于重新加载时添加。在该class中，将原本的url后缀修改为一个随机数，保证每次重新加载时都会读取新的图片。

希望我的经验能够帮到大家。如果还有其他解决方法或您对此有所疑问，欢迎在评论区留言讨论。