前端图片缓存之通过img标签加载GIF只能播放一次问题(转载)

最近项目中要求再网页中插入一张gif图片，让用户每次到达该位置时动一次，所以我们就制作了一张只动一次的gif图片通过img标签引入。当用户进入该位置时，通过remove()清除图片然后重新append()进来，并没有效果。然后又尝试了attr()方法变化src的位置，都没有效果。这时候就想到是浏览器缓存的问题，图片进入浏览器就只加载一次，只能浏览器就会拿住图片缓存。这也是浏览器提高页面访问速度的一种方式了，这时候为了实现我们的目标，就要想办法清除掉这个缓存。

方法1、使用CTRL+F5进行强制刷新。当然，我们开发者怎么能让用户自己去刷新呢，pass。

方法2、在图片img标签src参数加上随机数，如下：

//这里用的是jQuery的方法
<script>
   var imgText = `<img src="myimage.gif?+${Math.random()}" />`
   $(".imgLocation").append(imgText);
<script/>

方法3、在图片img标签src参数加上毫秒时间戳，如下：

<script>
   var imgText = `<img src="myimage.gif?+${new Date().getTime()}" />`
   $(".imgLocation").append(imgText);
<script/>

方法4、meta设置no-cache(最好不要用，会造成性能问题)

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">