7

我在网页上有一个大的 gif 动画，并且想要在它完全加载完成之前启动它。使用 JavaScript / jQuery 怎么可能？

4

4 回答 4

7

使用占位符图像，并在 GIF 完全加载后将其替换为动画 GIF：

<img id="anim" src="placeholder.gif">

JS：

var myanim = new Image();
myanim.src = '/img/actions.png';
myanim.onload = function() {
    document.getElementById('anim').src = myanim.src;
}​

http://jsfiddle.net/mblase75/6XTg7/

于 2012-11-15T14:34:31.367 回答
1

您可以隐藏它，直到它完全加载。

<!--- this uses jquery !-->

<script type="text/javascript">

  var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif";

  var image = $('<img />').load(function(){

      $(this).show();

  }).attr('src', image_url).hide();

  $('body').append(image);

</script>

这里的问题是，一旦图像被下载（即它在浏览器缓存中），似乎真的没有任何方法可以从特定帧启动它。

于 2012-11-15T14:44:02.117 回答
1

您可以使用 CSS 隐藏 GIF（或 JS 用占位符替换它们），当加载 GIF 时，您可以触发 show()

$('img[src$=".gif"]').load(function(){$(this).show())

于 2012-11-15T14:32:56.663 回答
0

您无法通过 javascript 控制 gif 动画，因此您必须实施某种 hack。你必须在一开始就把它隐藏起来。您可以放置​​一个带有实际图片尺寸和“等待”之类的文本的 div，而不是实际图片。

在浏览器中下载图像后，您可以将 div 替换为图像。在那个时间点动画将开始

于 2012-11-15T14:38:22.153 回答