Question

我在网页上有一个大型的gif动画，并希望在它完全加载完成之前启动它。如何才能使用JavaScript / jQuery？

Answer 1

使用占位符图片，并在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/

Answer 2

您可以使用CSS隐藏GIF（或者用占位符代替JS），加载GIF时可以触发show（）

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

Answer 3

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

<!--- 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>

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

Answer 4

你无法通过javascript控制gif动画，所以你必须实现某种黑客攻击。你必须在开头隐藏它。您可以将实际图片的尺寸与“等待”等文本放在一起，而不是实际图片。

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

启动gif动画直到它完全加载

4 个答案: