Question

 $(".content-short").click(function() {
      var ID = $(this).attr('data-id');
      $('.loadingmessage').show(); 
      $.ajax({   
          type: "post",
          url: "collegeselect.php",
          data: 'ID=' + ID,
          dataType: "text",                  
          success: function(response){                    
              $(".content-full").html(response); 
              $('.loadingmessage').hide(); 
          }
      });
    });

// collegeselect.php //用于从数据库加载数据，//。loadingmessage //用于gif

当我第一次使用它时它显示gif，但是第一次点击后没有显示gif，因为检索到的数据已经从之前的ajax请求的content-full中可用，如何在每次点击内容短片时显示它？

Answer 1

之所以发生这种情况，是因为您要使用响应加载GIF图像来替换实际内容。

因此，当您第一次点击它时，按照代码显示ajax调用成功后，您已替换.content-full的内容，然后就没有可用的GIF。

解决方案： 要解决此问题，请使用响应发送相同的图片代码，或将加载程序图片移出.content-full。

Answer 2

在您的请求成功之前添加beforeSend : function()。

试

$(".content-short").live(function() {
      var ID = $(this).attr('data-id');
      $('.loadingmessage').show(); 
      $.ajax({   
          type: "post",
          url: "collegeselect.php",
          data: 'ID=' + ID,
          dataType: "text",
          beforeSend : function()
          {
            $('.loadingmessage').show();
          },
          success: function(response){                    
              $(".content-full").html(response); 
              $('.loadingmessage').hide(); 
          }
      });
    });

Answer 3

从评论中我收集到img在.content-full容器内。问题是当ajax成功执行img时，$(".content-full").html()会被删除。解决此问题的一种方法是将img移出容器。另一种方法是存储对img的引用，并将其与.append()或.prepend()的响应一起添加回来。

$(".content-short").click(function() {

    var ID = $(this).attr('data-id');
    $('.loadingmessage').show();

    $.ajax({
        type: "post",
        url: "collegeselect.php",
        data: 'ID=' + ID,
        dataType: "text",                  
        success: function(response) {

            var $content = $(".content-full");
            var $loaderImg = $content.find('.loadingmessage').hide();
            $content.html(response).prepend($loaderImg);
        }
    });
});

此处a demo模仿setTimeout的行为。

用ajax请求加载gif

3 个答案: