3

大きな 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 ; 
}

JS

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>

JS 

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

JSにエラーがあることは知っていますが、JSのスキルが不足しているため、何をすべきか、何をしようとしているのかわかりません。どんな助けやアドバイスも大歓迎です！

ありがとう！

4

2 に答える 2

4

これをチェックして：

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

以前のコードのように、その中に画像を追加している#loaderため、機能し$('#loader').load(..)ません。内の画像を見つけて、その画像の#loaderを変更srcします。

于 2012-08-07T05:19:19.970 に答える
2

必要に応じて、タイムスタンプを追加して、キャッシュからの画像の読み込みを回避することもできます。

$j("#refresh").click(function() {
  var timestamp = new Date().getTime();
  $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});
于 2012-08-07T05:21:24.490 に答える