jQuery 在不重新加载文件的情况下重新启动 gif 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19831319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restart a gif animation without reloading the file
提问by 3rfan
Is it possible to restart a gif animation without downloading the file every time? My current code looks like this:
是否可以在不每次下载文件的情况下重新启动 gif 动画？我当前的代码如下所示：
var img = new Image();
img.src = 'imgages/src/myImage.gif';
$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
Edit
编辑
When I insert the gif into the dom it didn't restart the gif animation. I can only achieve this by appending a random string to the image src but this will download the image again.
当我将 gif 插入 dom 时，它没有重新启动 gif 动画。我只能通过向图像 src 附加一个随机字符串来实现这一点，但这将再次下载图像。
I want to know if it is possible to restart the gif animation without downloading the gif.
我想知道是否可以在不下载gif的情况下重新启动gif动画。
采纳答案by Sai Dubbaka
I've had similar requirement.
我有过类似的要求。
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;
}
回答by Adassko
for example on facebook - animated emoticons are not .gifs but a set of static frames on png file with dynamically set background offset. This way you have full control over your animation from javascript - you can even pause/unpause it or change its speed.
例如在 facebook 上 - 动画表情不是 .gifs 而是一组动态设置背景偏移的 png 文件上的静态帧。这样你就可以从 javascript 完全控制你的动画——你甚至可以暂停/取消暂停它或改变它的速度。
It's possible to split your .gif file into separate frames and generate a .png file on server side dynamically.
可以将 .gif 文件拆分为单独的帧并在服务器端动态生成 .png 文件。
This looks like a good weekend project for me ;)
这对我来说似乎是一个不错的周末项目；)
回答by kiss_von
restartGif(imgElement){
let element = document.getElementById(imgElement);
if (element) {
var imgSrc = element.src;
element.src = imgSrc;
}
}
// Example:
restartGif("gif_box")
回答by Kelvin Chan
function refreshgif() {
var giffile = $(".gif-class");
giffile.src = giffile.src;
}
回答by prakashapkota
create a function in javascript and then reput the image in the same place. when you want to replay the Gif call this function.
在 javascript 中创建一个函数，然后将图像放在同一个位置。当您想重放 Gif 时调用此函数。
function replayGif(){
var img = new Image();
img.src = 'imgages/src/myImage.gif';
$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
}
回答by Simon
The simplest javascript solution:
最简单的javascript解决方案：
Function:
功能：
function restartGif(ImageSelector){
var imgSrc=document.querySelector(ImageSelector).src;
document.querySelector(ImageSelector).src=imgSrc;
}
Call function:
调用函数：
restartGif(SELECTOR) // Example: restartGif('.homer')
Example: http://jsfiddle.net/nv3dkscr/
回答by joostmakaay
Just make it loop forever? otherwise you could use an ajax request every (duration of gif) to restart it.
让它永远循环？否则，您可以每隔（gif 的持续时间）使用 ajax 请求来重新启动它。
even with javascript it would be possible;
即使使用 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
}
回答by Rohan Kumar
This may help you,
这可能会帮助你，
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);
回答by Aircraft5
Try to set the src of the gif animation to itself or set it to an empty string followed by the original src again. ;)
尝试将 gif 动画的 src 设置为自身或将其设置为空字符串，然后再次设置原始 src。;)
