H5 img加载gif图片播只能播放一次的问题

最新推荐文章于 2024-04-29 21:30:00 发布

原创最新推荐文章于 2024-04-29 21:30:00 发布 · 5.2k 阅读

4 ·

CC 4.0 BY-SA版权

工作中的一点记录专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个常见的网页交互设计问题：点击播放的GIF图因浏览器缓存而无法重新开始播放。通过在GIF源路径后添加随机数，确保每次请求都是最新路径，从而实现GIF图的重新播放。

点击某个交互显示改gif图播放，再次点击的时候因为浏览器的缓存会直接显示上次播放结束后的状态，不会重新播放，解决方法是给src的路径上加上一个随机数让这个图片一直保持最新的路径就可以重新开始播放：

  //洒水gif加上随机数可以重新播放
        this.sprinklingImg=require('@/assets/images/loveOrchard/watering.gif')+'?'+Math.random()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

want、

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js html5制作可控制gif动态图片暂时播放效果代码

11-24

这样，即使GIF是同一张图片，浏览器也会认为它是一个新资源，从而停止加载。当恢复播放时，我们再次将`src`设为原GIF，浏览器会重新开始加载。为了使这些功能可用，我们需要在HTML中添加控制按钮，并将上述...

小程序H5开发中的图片懒加载与预加载

最新发布

小程序开发

05-20

836

本文旨在为前端开发者提供完整的图片加载优化解决方案，覆盖Web/H5和小程序两大平台，重点解决移动端场景下的图片加载性能瓶颈问题。对比分析两种加载策略的本质差异详解浏览器原生实现方案构建数学模型进行性能量化多平台框架的工程实现方案生产环境最佳实践指南懒加载(Lazy Loading)：按需加载策略，当媒体资源进入可视区域时触发加载预加载(Preloading)：预测性加载策略，提前获取后续可能需要的资源视口(viewport)：用户当前可见的网页区域。

2 条评论您还未登录，请先登录后发表或查看评论

如何让gif图在html网页中只播放一次

kerryqpw的博客

04-27

7950

如何让gif图在html网页中只播放一次在前端页面开发过程中，有些页面需要放gif图，但是设计给的gif很大记录都是不停循环播放的，如果想在页面中，git图只播放一次，可以通过以下步骤操作： 1、在 photoshop 中打开 gif 图 2、在菜单栏点击窗口，将时间轴勾上，这样在底部就会出现时间轴工作区 3、在时间轴工作区，将循环播放模式从永远改为一次或您需要的次数 ...

html5 gif 只播放一次,使用JS和canvas实现gif动图的停止和播放代码

weixin_34255938的博客

06-16

2247

HTML5 canvas可以读取图片信息，绘制当前图片。于是可以实现图片马赛克，模糊，色值过滤等很多图片特效。我们这里不用那么复杂，只要读取我们的图片，重绘下就可以。JS代码：图片帧(第一帧)canvas.getContext('2d').drawImage(this,width,height);// 重置当前图片try {this.src = canvas.toDataURL("image/gi...

针对网页html中插入动图gif不能循环播放只播放一次的解决方案

徊忆羽菲

12-12

6099

针对网页html中插入动图gif不能循环播放只播放一次的解决方案

解决gif图片只加载一次的问题

C_fashionCat

06-24

2501

由于浏览器对图片有缓存的机制，所以对于一次性型的gif图，只会加载动效一次，后面再次使用时就不会出现我们想要的效果，因此我们需要解决这种缓存问题，可以使用添加时间戳的问题让浏览器认为这不是同一张gif图，从而再次加载图片，实现每次都有动效。代码： <img v-show="show" :src="onceImg" /> <script> export default { name: 'home', data() { return { show: true, s

解决微信小程序通过img标签加载GIF只能播放一次问题

weixin_42125732的博客

12-30

1万+

博主遇到的问题就是做微信小程序导航栏时，自定义的tabBar导航栏需要在选中的时候有一个动画效果，所以选择了gif图，但是发现点击多次时。gif图有时候不会动，通过查阅资料发现注意：加载本地gif时，使用v-if,尽管重新加载，由于缓存的问题等等,gif也会保持在终点的状态，不会重新播放需求：我们切换自定义导航栏图标时，每次都要有动态效果并且每次显示都是从第一帧开始播放, 方案：可以用一个随机数解决 <image :src="'../static/img/test.gif?'

前端开发之如何让gif 图只播放一次

前端攻城狮

05-24

2万+

在前端页面开发过程中，有些页面需要放gif图，但是设计给的gif很大记录都是不停循环播放的，如果想在页面中，git图只播放一次，可以通过以下步骤操作： 1、在 photoshop 中打开 gif 图 2、在菜单栏点击窗口，将时间轴勾上，这样在底部就会出现时间轴工作区 3、在时间轴工作区，将循环播放模式从永远改为一次或您需要的次数 4、依次点击: 文件-> 导出-&gt...

H5——监听页面图片加载完后，放开loading页面

weixin_45629623的博客

05-27

1277

思路：给那些图片设置data-src=‘图片地址’属性代替 src。然后写个公共文件处理逻辑：获取img标签的dom，把data-src的值赋给src，用onload方法判断图片加载完没。当所有图片都onload了。就可以放开loading了。 <template> <div> 页面样式自己写， <slot></slot> //记得带这个 </div> </template> <script> e

uniapp开发h5页面实现图片预加载功能

HouGISer的博客

01-24

1万+

背景 h5页面，很多时候存在大量的图片、动画，这些都需要下载大量的静态资源，如果我们直接打开页面，会发现部分图片正在加载或者还未下载的现象，严重影响体验效果。为了解决这个问题，我们需要进行图片预加载的操作。什么是图片预加载？简单来说，图片预加载就是在页面渲染前把所有的图片、GIF等静态资源全部下载完毕，使得页面渲染后直接打开缓存的图片资源，从而减少卡顿的问题，优化用户体验。那么如何在h5中...

H5如何检测image标签加载gif渲染完成

03-21

还要注意，某些浏览器可能会在GIF完全下载前就开始播放，所以可能需要结合其他事件，比如使用fetch API预加载GIF，确保完全下载后再进行检测。此外，参考的资料提到HTML的picture标签和srcset，但用户的问题是关于...

gif动画可控制播放

jdk137的专栏

12-14

770

问题描述：翻页H5，需要每次翻页时播放gif动画。gif动画不是循环的，只需播放一遍。浏览器却只会在第一次进入翻页时播放gif动画，第二次进入时停留在最后一帧。处理方案：每次进入某个页面时，删除gif元素并添加img元素，等待10毫秒后为img.src赋值。 // 预加载图片相比于让图片url带随机数的方案，不需要每次加载。对于动辄上M的gif，体验优化明显。 var image = new Image(); image.src = "path"; // 删除并重新创建如果不删除元

多种方法实现H5网页GIF图片动画效果

qq_24193261的博客

07-21

1万+

在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；在w

用HTML5实现播放gif文件

cnds123的专栏

04-29

3353

用HTML5实现播放gif文件

web前端面试题附答案025-怎么让gif动图只播放一次？以及扩展gif大图的渲染优化思路

xingyu_qie的专栏

10-06

2557

这个问题回答的时候，可以全面的说，ps我也搞过，前端思路我也搞过，甚至自己举一反三，思考出了优化渲染gif大图的思路

控制gif图片的单次播放

秋天未成熟的博客

02-28

3097

业务需求：实现用鼠标触发gif图片的单次播放，播放后停留在gif的最后一帧上面，目的是为了招商引资，打广告，赚运行的服务器费用。一、问题正常gif图片在浏览器中不加任何控制的话，会在页面加载完成后，自动播放，不受控制。二、解放方案 1、将每个gif图片的第一帧图像保存起来，作为浏览器加载完成后的显示图片，事先让UI设计师设计每个gif图片时，故意保留了第一帧的图片，所...

html页面实现gif的重新播放