我创建了一个动态 GIF，并使用一些翻转 JavaScript 将其实现为网页按钮（按钮在翻转之前是静态的，然后切换到预加载的动画一次图像）。它工作完美，但唯一的问题是帧速率比我预期的要低一些。在 Photoshop 中，我将时间设置为“无延迟”，所以我认为这可能是 GIF 的一般限制？或者这是浏览器设置的限制？有人有这方面的信息或解决方法吗？文件大小< 100KB，大约 5 帧，所以我觉得它的代码相关？
我的 Javascript：
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
扎克
I've created a motion GIF, and implemented it into a web page button using some rollover javascript (button is static until rolled over, then switches to a preloaded animated once image). It's working perfectly, but the only catch is that the framerate is a bit lower than I expected. In Photoshop, I set the time to 'No Delay' so I figure this might be a limitation of GIFs in general? Or is it a limitation the browser sets? Anyone have any info on this or a workaround? The file size is < 100KB w/ about 5 frames, so I feel like its code related?
My Javascript:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Zach
发布评论
评论（2）
精确控制 GIF 帧速率几乎是不可能的，因为播放会根据浏览器、连接、速度、计算机速度等多种因素而变化。如果您想精确控制动画，我建议使用 sprite strips 和诸如 < a href="http://spritely.net/" rel="nofollow">http://spritely.net/ 用于 jQuery。
It is almost impossible to control GIF framerates precisely as the playback varies depending on multitude of factors such as browser, connection, speed, computer speed etc. If you would like to control your animation precisely I recommend suing sprite strips and a library such as http://spritely.net/ for jQuery.
使用不同的压缩设置制作 .gif 的多个副本，并将它们交换到测试服务器中。
通过这种方式，您可以观察不同文件大小的相同 .gif 的加载时间，这可能会帮助您缩小问题范围。
我们想要澄清是资产的压缩设置（文件大小）还是在运行时加载资产的代码。
如果您确认这是代码，我将预加载/缓存 .gif。
Make several copies of the .gif with different compression settings and swap them into the testing server.
This way you can observe the loading times for the same .gif with different file sizes and it might help you narrow down the issue.
We want to clarify whether it's the compression setting of the asset (file size) or the code that's loading the asset at run time.
If you confirm that it is the code, I would preload/cache the .gif.