Воспроизведение GIF-анимации/перезагрузка GIF по щелчку мыши

Question

Воспроизведение GIF-анимации/перезагрузка GIF по щелчку мыши

У меня есть GIF-анимация, которая является большой, и я заставляю ее отображать значок загрузки, пока GIF не будет загружен. Как только он загружен, отображается GIF. Работает отлично, но я хочу добавить кнопку "replay", чтобы вызвать 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');

});

Приведенный выше код работает нормально. Теперь для кода" Replay "или" Reload", который не работает:

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 я не знаю, что я должен делать или пытаться. Любая помощь или совет очень ценится!

Спасибо!

513 2

jQuery javascript

2 ответов:

Comments

Ничего не найдено.

thecodeparadox · Accepted Answer · 2012-08-07 08:25:13

Проверьте это:
$j("#refresh").click(function() {
  $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
Как и в предыдущем коде, вы добавляете изображение в #loader, поэтому $('#loader').load(..) не будет работать. Найдите образ внутри #loader и затем измените src этого образа.

Sudhir Bastakoti · Accepted Answer · 2012-08-07 08:21:24

Вы также можете добавить метку времени, чтобы избежать загрузки изображения из кэша, если это необходимо:
$j("#refresh").click(function() {
  var timestamp = new Date().getTime();
  $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});