标题是不言自明的,但我将逐步提供有关此事的观点.希望我不是第一个注意到Webkit/Chrome上这个(显然)错误的人.
我想重置一个GIF动画.到目前为止我见过的所有例子都只是简单地将src图像设置为自身,或者将其设置为空字符串,然后src再将其设置为原始字符串.
看看这个JSFiddle以供参考.GIF在IE,Firefox和Chrome上完全重置.
我遇到的问题是图片仅display:none在Google Chrome上显示.
检查这个JSFiddle.在显示在页面中之前,GIF在IE和Firefox上重置得很好,但Chrome只是拒绝重置其动画!
到目前为止我尝试过的:
src像在小提琴中一样设置自身在Chrome中不起作用.src为空字符串并将其恢复为默认值也不起作用..html('')并将图像放回其中,也不起作用.display图像也不起作用..show().fadeIn()src在只有我已经发现迄今的解决方法是保持图像与它的默认display,并通过操纵它.animate()ING和.css()荷兰国际集团的透明度,高度和能见度在必要时模拟display:none的行为.
这个问题的主要原因(上下文)是我想在页面中淡化之前重置ajax加载器GIF.
所以我的问题是,是否有一种正确的方法来重置GIF图像的动画(这可以避免Chrome的display:none"bug")或者它实际上是一个错误？
(ps.您可以更改小提琴中的GIF以获得更合适/更长的动画gif进行测试)
从Firefox开发者网站,我知道Firefox使用
objectURL = window.URL.createObjectURL(file);
获取文件类型的URL,但在chrome和其他webkit浏览器中我们有window.webkitURL.createObjectURL()检测url.
我不知道如何基于浏览器引擎交换这些功能,我需要在两种浏览器上工作(Chrome和firefox)
https://developer.mozilla.org/en/DOM/window.URL.createObjectURL
我有一个网站上有图像.一些图像是动画GIF图像.我所做的是显示GIF的静态图像,并在点击事件中显示实际的GIF图像.
这是我的代码:
JQuery的
$(".theimage").click(function() {
$(this).addClass('hidden');
$(this).next().removeClass('hidden');
});
$(".theimage2").click(function() {
$(this).addClass('hidden');
$(this).prev().removeClass('hidden');
});
HTML
<img class="theimage" src="image_static.gif" alt=""/>
<img class="theimage2 hidden" src="image_animated.gif" alt=""/>
CSS
.hidden{
display:none !important;
}
我正在更改上一个和下一个元素的类,因为我可能在一个页面上有多个GIF图像,从而阻止了对所有这些元素发生的操作.
到目前为止,这个脚本很有用.实际上我想要实现的是GIF图像始终从头开始.目前它只是第一次这样做.然后,看起来它继续在后台播放,在第二次通话时,它只是继续播放.有时甚至它会冻结,我猜测与缓存有关.
我怎么能做到这一点？