重放GIF动画/重新加载GIF点击

我有一个很大的GIF动画，我在显示一个加载图标，直到加载GIF。一旦它加载GIF显示。很好用，但我想添加一个“重放”按钮来触发GIF重放（重新加载）。重放GIF动画/重新加载GIF点击

代码加载和GIF：

HTML

<div id="loader" class="loading img-center"></div>

CSS

#loader { 
width: 600px; 
height: 450px; 
margin: auto; 
} 

#loader.loading { 
    background: url(/Images/ajax-loader.gif) no-repeat center center; 
    width:32px; 
    margin:auto ; 
}

var $j = jQuery.noConflict(); 
$j(function() { 
    var img = new Image(); 
    $j(img) 
    .load(function() { 
    $j(this).hide(); 
    $j('#loader') 
     .removeClass('loading') 
     .append(this); 

    $j(this).fadeIn(); 
    }) 
.error(function() { 
    }) 
.attr('src', '/2012/images/august/sailboat.gif'); 
});

上面的代码工作正常。现在的 “重放” 或 “刷新” 的代码，不工作：

HTML

<a id="refresh" href="#"> Replay Animation </a>

$j(function() { 
    $j("#refresh").click(function() { 
    $j("#loader").load("/2012/images/august/sailboat.gif") 
    }) 
})

我知道有一些错误与JS，但由于我缺乏JS的技能，我不知道该怎么做或尝试。任何帮助或建议非常感谢！

谢谢！

来源

2012-08-07 L84

而是通过这一切的麻烦，为什么不只是编辑实际的gif图片重演去的。 – elclanrs 2012-08-07 05:17:32

@elclanrs - 因为GIF中有文本，所以我希望用户可以控制何时重播。 – L84 2012-08-07 05:18:24

检查：

$j("#refresh").click(function() { 
    $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif"); 
});

正如在以前的代码你内#loader所以，$('#loader').load(..)行不通追加图像。在#loader内找到图像，然后更改该图像的src。

来源

2012-08-07 05:19:19 thecodeparadox

感谢您的帮助，但没有奏效。 – L84 2012-08-07 05:24:46

知道了！ - 我有''中的代码，并且必须将它放在HTML下面的''中。 – L84 2012-08-07 05:48:02

你也可以在需要时追加时间戳，以避免缓存图像加载：

$j("#refresh").click(function() { 
    var timestamp = new Date().getTime(); 
    $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp); 
});

来源

2012-08-07 05:21:24

避免缓存会使加载指示符毫无意义。它只需要重新下载它 – Eric 2015-12-14 00:31:24

重放GIF动画/重新加载GIF点击

回答

相关问题