How to implement an animation of the response from the server?

P

Pavel Chuev2016-06-02 17:05:04

PHP

Pavel Chuev, 2016-06-02 17:05:04

<html>
  <head>
    <style>
      #loadImg{position:absolute; z-index:1000; display:none}
    </style>
  </head>
  <body>
    <img id="loadImg" src="/loadImg.gif" />
  </body>
</html>
<?
  
  $get = file_get_contents("http://shikimori.org/api/animes?limit=20&order=ranked");
  $get = json_decode($get);
  
  for ($i = 1; $i < count($get); $i++) {
    echo '<h6><a id="'.$get[$i]->id.'" title="'.$get[$i]->russian.'" href="http://shikimori.org'.$get[$i]->url.'" data-toggle="popover">'.$i.'.'.$get[$i]->russian.'</a></br></h6>';
  }
  
?>
<script type="text/javascript">
  $(document).ready(function(){
    $('[data-toggle="popover"]').popover({
      html: true,
      title: $(this).attr('title'),
      content: 
      function() {
        return $.ajax({
          url: '//shikimori.org/api/animes/'+$(this).attr('id'),
          dataType: 'html',
          async: false,
          beforeSend: function() {startLoadingAnimation()},
          success: function() {stopLoadingAnimation()}
        }).responseText;
      },
      trigger: 'hover',
      placement: 'left'
    });
  });
  function startLoadingAnimation()
  {
    var imgObj = $("#loadImg");
    imgObj.show();
    
    var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
    var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
    
    imgObj.offset({top:centerY, left:centerX});
  }
  
  function stopLoadingAnimation()
  {
    $("#loadImg").hide();
  }
</script>

I'm trying to implement popup windows that would display information from another site. The problem is this: This code shows the popup window only after the data is loaded from the site, that is, the loading animation does not even have time to start, as it immediately ends. How to fix it?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexander Borisovich, 2016-06-02
@Alexufo

success - isn't it a successful transfer event? Change to complete when the answer came.
api.jquery.com/Ajax_Events

R

Ruslan, 2016-06-02
@rOOse

Is that bootstrap? Use trigger: manual, manually hang the function on hover, show a popup with animation on hover and send a request, when the answer comes, remove the animation and update the text, something like this.