vue中关于GIF不动的解决办法

最新推荐文章于 2023-01-05 11:32:27 发布
最新推荐文章于 2023-01-05 11:32:27 发布
阅读量4k 收藏 5
点赞数 1
文章标签： css html html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24992475/article/details/109465888
版权

vue中关于GIF不动的解决办法

首先我也是搜索了导致这个问题的原因，看到网上讲的是因为浏览器的缓存机制；现象就是，GIF图正常img标签引入进入后，页面只动了一次，后面就不会动了。我没有深入的去研究他的起因，下面说下是如何解决的：
首先页面的img标签不变，正常引入GIF图片，同时给img标签一个ID，如下图
在这里插入图片描述
然后设置一个计时器，每几秒钟重新赋值，（里面的方法不用管）如下图
在这里插入图片描述
到此问题解决,（最后别忘了在销毁周期里把计时器清除）
在这里插入图片描述
结束语：菜鸟一枚，如果有别的方法可以留言

Dlow-
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
关于不循环gif回退页面不重新显示问题--vue项目
qq_41227106的博客
10-13 743
1、首先建立一个vue项目 问题描述：在vue项目中使用swiper并且swiper里面的内容有部分是gif图片，那么当你在前往下一swiper的时候gif正常加载正常播放，当你回退到上一swiper时发现gif只是显示并没有展示动图，主要原因是gif加载后会缓存下来，若没有重新加载是不会再实现动图的，解决如下“ 1、在gif路径下添加随机数或者不重复的唯一值。如： <img ...
2024年前端最新vue裁剪gif图片并保持动画效果，借花献佛
最新发布
2301_82244509的博客
05-07 218
:‘确定’}}
vue 加载动态图片出错的三种解决方法
kkelim的博客
03-24 4154
由于解析问题，通常直接引用链接，图片会加载失败，通过学习，整理出以下三种解决错误的方法 <template> <div class="first"> <!-- 普通加载 （不显示）出错--> <img :src="imgarr[1]"> <!--第一种 在数据链接中用require("./1.jpeg")包裹链接 --> <img :src="imgarr[0]">
解决微信小程序通过img标签加载GIF只能播放一次问题
weixin_42125732的博客
12-30 1万+
博主遇到的问题就是做微信小程序导航栏时，自定义的tabBar导航栏需要在选中的时候有一个动画效果，所以选择了gif图，但是发现点击多次时。gif图有时候不会动，通过查阅资料发现 注意：加载本地gif时，使用v-if,尽管重新加载，由于缓存的问题等等,gif也会保持在终点的状态，不会重新播放 需求：我们切换自定义导航栏图标时，每次都要有动态效果并且每次显示都是从第一帧开始播放, 方案：可以用一个随机数解决 <image :src="'../static/img/test.gif?'
解决在vue中切换图片，gif格式的图片停在最后一帧的问题
weixin_43148683的博客
05-05 1141
应用场景： ​ 页面刚加载时，显示的是png格式的图标，当鼠标放上去的时候，切换成为gif的动图，一般我们会想到使用hover进行切换图标，但是这样就会导致gif会直接展示最后一帧，因为gif已经被浏览器加载进内存了，再次读取的时候，会直接从内存读取。所以我们可以在图片的后边加上时间戳或者随机数,然后使用@mouseenter和@mouseleave事件进行控制鼠标移动到图标和离开图标的操作 <div class = "img-div"> <!-- :src = "`${rx
Image中显示动态图片Gif
10-29
在iOS开发中，我们可以使用`UIImage`类的`init(named:)`方法加载GIF，但默认情况下，UIKit并不支持动态GIF。为了实现动态显示，我们需要借助第三方库，如`FLAnimatedImage`，它提供了更好的性能和控制。 对于跨平台...
移动端页面在ios中不显示图片的解决方法
01-20
解决这个问题的方法相对简单：只需确保图片URL不包含任何非标准的参数或后缀，使其保持为纯图片文件路径。在下载图片时，如果可能，应选择直接保存图片文件，而不是包含有额外参数的链接。如果从服务器请求图片，...
vue+echarts数据显示通用模板
05-31
这个模板充分利用了Vue.js的组件化特性，结合ECharts的强大图表库，为开发者提供了高度可定制和易于维护的解决方案。 Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化的设计理念受到广泛欢迎...
Gif动画，播放一次就停止播放
11-07
检查代码中关于GIF加载、显示和循环的部分，确保没有错误地停止了动画播放。 3. **浏览器兼容性**：不同的浏览器对GIF的支持程度不同。有些老版本的浏览器可能不支持自动循环播放。测试GIF在多个浏览器和设备上的...
gif动态图片播放Facebook特效.zip
07-04
"gif动态图片播放Facebook特效.zip"这个压缩包提供了一种解决方案，它通过巧妙的JavaScript（JS）技术，使得动态GIF图片可以以静态封面的形式呈现，只有在用户点击或者鼠标悬停时才会加载并播放动态效果，从而优化了...
微信小程序 通过img标签加载GIF只能播放一次问题
u013611033的博客
06-05 6197
<image :src="'../static/img/blink.gif?'+Math.random()" mode="aspectFit" class="blink" v-if="showLikeGif" @click.stop /> 加载本地gif时，就算image重新渲染了，gif也会保持在终点的状态，不会重新播放 需要效果，动态切换gif,并且每次显示都是从第一帧开始播放, 目前可以用一个随机数解决 ...
vue3加载动态图片
时光清浅处，一步一安然
07-08 6725
vue3 动态加载图片
vue引用动态gif图片
OnlyJally的博客
01-05 3213
vue引用动态图片如果直接引用地址会出现bug需要通过`require`和`replace`配合引用
vue动图加载图片不能正确显示的解决方法
柳牧之的博客
09-05 4440
vue动图加载图片不能正确显示的解决方法解决核心代码运行结果 上次解决过一次，没有记录，后来发现有小伙伴问我这个问题，我今天就顺手记录一下，具体的原因我这里就不详细说，加载不出来简略的原因是vue简析地址时候把你原的地址当做了一个模块来处理。 解决核心 url: {url: require(’./yunxing.gif’)}, 避免vue解析错误。 代码 <template> ...
Vue解决动态图片无法加载的问题
ForgivenCheney的博客
07-19 1951
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 一、业务场景 动态加载图片，图片无法正常显示，前缀默认添加了http://localhost:9588/ 至于为什么会自动加，我没有找到确切的原因，后续找到后会进行更新 二、代码示例 示例： HTML: <img :src="imgURL" alt="图片"> <im...
vue中libgif控制GIF图片播放、暂停、上一步、下一步
qq_37312180的博客
11-25 3147
vue中libgif控制GIF图片播放、暂停、上一步、下一步。
【前端图片缓存】通过img标签加载GIF只能播放一次问题
热门推荐
ion_L的博客
09-02 2万+
最近项目中要求再网页中插入一张gif图片，让用户每次到达该位置时动一次，所以我们就制作了一张只动一次的gif图片通过img标签引入。当用户进入该位置时，通过remove()清除图片然后重新append()进来，并没有效果。然后又尝试了attr()方法变化src的位置，都没有效果。这时候就想到是浏览器缓存的问题，图片进入浏览器就只加载一次，只能浏览器就会拿住图片缓存。这也是浏览器提高页面访问速度的一...
gif在html里为何会自动停止,CSS或JS实现gif动态图片的停止与播放
weixin_42122881的博客
06-07 2046
一、屋外：寒风吹，雪花飘；屋内：空调吹，代码飘上午出去买菜，正好下雨了，还夹杂着冰珠子。鄙人大意，穿的是一件帅气但单薄的黄色大衣，立马冻成了中华田园犬。原本计划去钓鱼的，科科，作罢，上午在家看CCTV5 骑士队vs鹈鹕队，下午补动漫码代码做文章，好生惬意。对于习惯性刷微博的我，总时不时会看到类似下面的游戏：测测你和小白(白百何)有哪些共同点，戳开动图，最先看清的词是什么？ie浏览器的同学可以按es...
vue3中props传值watch监听不到的解决办法
07-27
在Vue 3中，如果你在子组件中使用props接收父组件传递的值，并且使用watch监听props的变化，但是发现watch无法监听到props的变化，可能是因为Vue 3中的props默认是不可变的。 解决这个问题的方法是，将props声明为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值