在不重新加载文件的情况下重新启动 gif 动画
Restart a gif animation without reloading the file
是否可以在不每次都下载文件的情况下重新启动 gif 动画?我当前的代码如下所示:
var img = new Image();
img.src = 'imgages/src/myImage.gif';
$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
编辑
当我将 gif 插入 dom 时,它没有重新启动 gif 动画。我只能通过将随机字符串附加到图像 src 来实现这一点,但这将再次下载图像。
我想知道是否可以在不下载 gif 的情况下重新启动 gif 动画。
我也有类似的要求。
var img = document.createElement("img"),
imageUrl = "http://i73.photobucket.com/albums/i231/charma13/love240.gif";
img.src = imageUrl;
document.body.appendChild(img);
window.restartAnim = function () {
img.src = "";
img.src = imageUrl;
}
例如在
Facebook上 - 动画表情符号不是.gif,而是PNG文件上的一组静态帧,具有动态设置的背景偏移量。通过这种方式,您可以从javascript完全控制动画 - 您甚至可以暂停/取消暂停它或更改其速度。
可以将.gif文件拆分为单独的帧,并在服务器端动态生成.png文件。
这对我来说是一个很好的周末项目;)
restartGif(imgElement){
let element = document.getElementById(imgElement);
if (element) {
var imgSrc = element.src;
element.src = imgSrc;
}
}
// Example:
restartGif("gif_box")
我遇到了类似的问题,我在重新启动 gif 之前通过调整图像的 display
属性解决了它。此外,设置超时以确保在更改图像属性后重新启动 gif 将运行。
const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
img.src = img.src;
}, 0);
这是受到这个答案的启发。
function refreshgif() {
var giffile = $(".gif-class");
giffile.src = giffile.src;
}
就让它永远循环吗? 否则,您可以使用 ajax 请求每次(GIF 的持续时间)来重新启动它。
即使使用JavaScript,这也是可能的;
var gif
window.onload=function () {
gif=document.getElementById('id')
setInterval(function () {
gif.src=gif.src.replace(/'?.*/,function () {
return '?'+new Date()
})
},5000)//duration of your gif
}
这可能会对你有所帮助,
var img = new Image();
src = 'imgages/src/myImage.gif';
img.src=src;
$('body').append(img);
setInterval(function(){
t=new Date().getTime();
$("img").attr("src", src+'?'+t);
},5000);
在
javascript中创建一个函数,然后将图像重新放在同一个地方。 当你想重播 Gif 时,调用这个函数。
function replayGif(){
var img = new Image();
img.src = 'imgages/src/myImage.gif';
$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
}
最简单的JavaScript解决方案:
功能:
function restartGif(ImageSelector){
var imgSrc=document.querySelector(ImageSelector).src;
document.querySelector(ImageSelector).src=imgSrc;
}
调用功能:
restartGif(SELECTOR) // Example: restartGif('.homer')
示例:http://jsfiddle.net/nv3dkscr/
尝试将
gif 动画的 src 设置为自身,或将其设置为空字符串,然后再次设置原始 src。 ;)
相关文章:
- 在不破坏未定义函数的情况下,对多个视图使用单个js文件
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- 在给定 javascript 中的表头的情况下生成 TSV 文件
- 如何在不使用require语句的情况下使用webpack加载目录中的所有文件
- 获取 HTML 5 音频控制文件位置并在不使用 id 选择器的情况下更新 src
- 如何在不使用Internet Explorer的情况下从未挂起的HTML文件执行程序
- AngularJS可以在没有任何服务器端技术的情况下将文件保存/写入服务器
- 如何使用javascript在不更改页面的情况下访问文件上传所选文件
- 如何在不使用处理程序的情况下使用ajax将文件从客户端发送到服务器端
- 如何在不必维护每个文件的两个版本的情况下,将通用JavaScript和映像部署到两个不同的EAR
- 如何在不干扰电子邮件通知的情况下将眼镜保存在文本文件中
- 在不干扰HTML代码的情况下,将javascript文件导入javascript文件
- 如何在没有JQuery的情况下在Javascript中获取文件的内容
- 如何在不使用任何 html 输入/搜索元素的情况下读取本地客户端文本文件
- 如何使用 dojo 在不冻结浏览器的情况下下载文件
- 如何在没有冲突的情况下将 JQuery 包含在 JavaScript 文件中
- 是否可以在不将其添加到DOM的情况下预加载和缓存视频文件
- 如何在不打开文件的情况下下载文件
- 在不安装Zend优化器的情况下运行php文件
- PhantomJS-在不提交表单的情况下上传文件