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

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 5.3k累计阅读 5.3k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄7年

关注

原创最新推荐文章于 2026-04-07 19:55:12 发布 5.3k 阅读 AI 写同款· GEO 优化 ›

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

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

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

收录于

工作中的一点记录

当前文章被收录于：

工作中的一点记录

14 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

相关推荐

手把手教你用scRNA-seq和scTCR-seq分析CD8⁺ T细胞在免疫治疗中的动态变化

本文详细介绍了如何整合单细胞RNA测序（scRNA-seq）与单细胞TCR测序（scTCR-seq）技术，深入解析CD8⁺ T细胞在癌症免疫治疗中的动态变化。通过从数据预处理、细胞亚群鉴定到TCR克隆追踪的完整分析流程，揭示了T细胞的功能状态转变与克隆演化规律，为理解免疫应答机制和开发精准治疗策略提供了关键方法学指导。

p8q9r0的博客 566

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

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

weixin_42125732的博客 1万+

open-web UI 实用指南

open-web UI 类似于chatgpt的界面,可以私有化模型本地部署，也可以用商业模型.本文只是用开源模型. 它以实现多模态AI聊天， AI 翻译，语音转文本，文本转语音，文生图，代码助手，可谓利器。

szmars的博客 3万+

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

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

前端攻城狮 2万+

CentOS7安装openGauss5.0.2LTS版本

该文档要根据自己的实际情况调整ip地址。要根据自己的实际网卡调整。

superhanyubo的专栏 2578

clumsy一款模拟弱网的工具

利用封装 Winodws Filtering Platform 的WinDivert 库, clumsy 能实时的将系统接收和发出的网络数据包拦截下来，人工的造成延迟，掉包和篡改操作后再进行发送。无论你是要重现网络异常造成的程序错误，还是评估你的应用程序在不良网络状况下的表现，clumsy 都能让你在不需要额外添加代码的情况下，在系统层次帮你达到想要的效果。

klb5555的专栏 2551

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

徊忆羽菲 6780

基于单片机的智能温控风扇设计

该智能温控风扇系统的设计目标是根据环境温度自动控制风扇的转速或开关状态，确保用户始终处于舒适的温度范围内。实时温度监测：通过温度传感器（如DS18B20或DHT22）实时监控环境温度。风扇控制：根据温度变化自动调节风扇的转速，温度过高时风扇加速，温度适中时风扇转速降低，达到节能与舒适平衡。LCD显示：通过LCD屏幕实时显示温度信息。无线通信：通过Wi-Fi或蓝牙模块将温度数据发送至手机或云平台，支持远程控制风扇的开关或调节转速。报警功能：温度过高或过低时，蜂鸣器发出警报，提示用户注意。

2201_76125393的博客 1153

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

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

weixin_34255938的博客 2341

论文必备 - YOLO26统计数据集中大、中、小目标数量，附完整代码和详细使用步骤

数据集是由微软开发维护的大型图像数据集。数据集标注类型对应任务包括物体检测、关键点检测、实例分割、stuff分割（没有特定形状的物体），全景分割人体关键点，人体密度检测等。官网数据规模和样本特点数据规模大：总共包含32.8万张图像）。其中标注过的图像超过 20 万张，拥有 150 万个目标实例，数据量丰富，能够为模型训练提供充足的信息。类别丰富：包含80个目标类别和91个“stuff”类别。目标类别涵盖了日常生活中常见的各种物体，如人、动物、交通工具、生活用品等；stuff。

Limiiiing的博客 264

Oracle EBS的帐套由“4C”构成，而华为MetaERP将其发展为“6C”

华为MetaERP从OracleEBS的"4C"架构升级为"6C"，实现核算理念革新。核心突破在于将会计科目、核算维度和核算单元解耦，形成"科目表+维度库"的灵活架构。新架构优势显著：1）科目回归会计本质，管理维度独立扩展；2）支持无限维度的精细化核算；3）实现数据权限隔离和内部交易自动化；4）采用元数据驱动设计，为AI应用奠定基础。这一平台化架构解决了大型企业在全球化、多元化发展中的核算难题，相比传统架构具有更强的灵活性和扩展性。

金牌架构师 203

gif在html5中不播放,gif 图片在canvas 中的播放

一，原理1.canvas、img、video，都是图像对象，属于图像类型的节点。这种图像对象不是Image 对象，而是对加载图像数据流的节点的统称。img 里的图像数据来源于提前制作好图片文件的，是静止的，比如.jpg，.png，.svg 等。.gif 是个特殊存在，另当别论。vedio 里的视频数据来源于提前制作好的视频文件，是动起来的。canvas 图像数据是动态生成的。2.图像对象的数据的读...

weixin_36373949的博客 1719

Python面试题及详细答案150道（126-135） -- 数据库交互篇

本文介绍了Python中操作MySQL、SQLite数据库及ORM框架的核心技术。主要内容包括：1. 使用pymysql连接MySQL数据库，演示了连接配置、SQL执行和事务管理；2. ORM原理及主流框架SQLAlchemy和Django ORM的示例；3. 通过sqlite3模块操作轻量级SQLite数据库；4. 数据库事务的ACID特性解析。这些内容涵盖了Python数据库开发的关键知识点，适合准备前后端面试的开发者复习核心概念和实际应用。

大剑师兰特的GIS世界 1727

html5 gif刷新无法播放的问题

最近在微信里面做一个项目，在微信的浏览器上面开发到处都是坑先说一个gif问题：当一个新用户进入界面，gif会开始播放，然后自然停止（这是一个只播放一次的gif），一切都很正常但是如果刷新界面，gif就不会动了（如果是循环播放的那种gif，就不会出现这种情况），一直保持着最后一帧的界面，这就有点违反常理了尝试用js控制缓存，在刷新页面的时候顺便把缓存清了，依然不行最后在SO上面翻

qq_25362821的博客 5059

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

使用h5的video标签优化Web的GIF

<video autoplay loop muted playsinline poster="original.jpg"> <source type="video/webm" src="original.webm"> <img src="original.gif"> </video> GIF上使用的无损压缩算法未经优化，以至于MP4或WebM之类的视频格式将提供比GIF图像小的文件大小。因此，解决GIF性能问题的一种方法是完全不使用GIF

缓月 1606

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

gif动画可控制播放

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

jdk137的专栏 827

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

ajax 上传视频 h5及时播放

pageEncoding="utf-8"%> --> 图片：图片上传上传图片大小必须在2M之内上传图片宽高必须在400-720之间图片类型必须是.gif,jpeg,jpg,png中的一

qq_29623951的博客 2428

iphone中处理Gif文件

直接用UIWebView播放gif图片UIWebView *webView;NSString *html= [NSString stringWithFormat:@""]; //或者写成 , Test.gif[webView loadHTMLString: html baseURL: nil];

wwwcybcom的专栏 1005

html5动态加载图片和加载视频

这两在做一个动态加载图片的东西，有点类似QQ发说说里面附带图片的那种，经过测试可以任意添加、删除，然后该删除的位置被后一位自动填充，还有一个bug，就是最后一个图片的控件没做处理，删掉最后一个就会导致添加不能成功。加载本地视频（google浏览器）和加载手机视频（android和ios）经过测试，在android手机上播放视频出问题了（播放地址无效），具体原因还在研究当中，有知道朋友可以告诉我一下

我不做大哥好多年 1万+

jQuery 判断所有图片加载完成

对于图片的处理，例如幻灯片播放、缩放等，都是依赖于在所有图片完成之后再进行操作。今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。一、普通方法监听 img 的 load 方法，每 load 一张图片比较一次。关键代码如下： var num = $img.length; $imgs.load(function() { ...

weixin_34355715的博客 240

H5 - canvas实现帧动画

前言相信大家小时候一定玩过这样的小人书：原理是快速切换图片，利用人眼的视觉暂留(Persistenceofvision)现象，脑补产生动画效果。其实我们的 vedio、GIF 等也是这样实现的，只是它的帧速可能更高。下面我们就利用爱奇艺万能播放器拆分一张GIF图获得 timg_vedio 显示本地图片先将照片显示至 Web上，HTML5 中有两种标签可实现： img canvas img 可使用其 src 指定图片，支持 .jpg、.png、.bmp <img id="jp

Hsy的博客 3105

那些H5用到的技术（1）——素材加载

编码环境前言什么时候用到素材加载？loading提示，让用户等待图片的加载音频的加载利用神器PreloadJS总结编码环境 Sublime Text 3 插件包括： Autoprefixer 自动补全CSS ColorPicker 颜色选择器 ConvertToUTF8 转码 GBK Support 支持GBK HTML-CSS-JS Prettify 前端代码...

weixin_34390105的博客 317

h5 一镜到底_序列帧&一镜到底H5开发实现分析

什么是序列帧类H5我们遇到的一类H5，其中包括“强动画”效果，UI设计提供的是一系列序列帧的素材时，前端将序列帧素材还原成动画进行展示的H5.几种实现方法gif采用gif格式的图片来展示序列帧动画，会存在图片文件大，移动端失真以及安卓端卡顿，以及循环播放情况下有时只会播放一次的情况。只能作为零碎的点缀素材时使用，不推荐复杂动画使用gif来实现。canvas基本实现通过canvas画布中通过draw...

weixin_39943799的博客 1370

html 5 gif手机版,动画GIF在HTML5画布

那么，如果gif文件的自动化画布动画不可用，您可以尝试使用精灵表，但确实需要更多的代码。var img_obj = {'source': null,'current': 0,'total_frames': 16,'width': 16,'height': 16};var img = new Image();img.onload = function() { // Triggered when im...

weixin_33789376的博客 256

html如何从video中获取图片,H5中video获取第一帧如何作为封面

本篇文章给大家详细介绍一下H5中video获取第一帧作为封面的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.引入库代码如下(示例)：2.HTML部分上传视频(必填)+上传文件展示效果如下图，样式的话，自己写哈，我比较懒，哈哈哈哈上面这部分代码是展示图片，效果如下，图片显示正常3.JS部分let result$('#uploadBtn').on('change', fun...

weixin_30271447的博客 3698

html5多个图片位置_前端设计-教你如何快速绘制HTML5动画

本周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了...

weixin_39806065的博客 446

上一篇：使用vue封装的一个toast组件

下一篇： vue中v-if 和v-show的妙用

手把手教你用scRNA-seq和scTCR-seq分析CD8⁺ T细胞在免疫治疗中的动态变化

p8q9r0的博客

03-11

566