Question

我正在制作应该检索包含给定关键字的用户帐户的Instagram API，该代码最初运行良好，但是当我插入加载gif的部分它不起作用时，gif只是不停地出现结果

这是我的代码

<!DOCTYPE html>
<html>
<head charset="utf-8">


<style type="text/css">


</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>


 <script>


 $(document).on("mouseover", "#instaUser img", function() {
        $(this).css('opacity', '0.5');
    });
$(document).on("mouseout", "#instaUser img", function() {

        $(this).css('opacity', '1');
}); 

                 var keyword;
                 var arr=new Array();
                 var time;


 function getUsers() {



  keyword=document.getElementById("search").value;
    document.getElementById("name").innerHTML = keyword;

//retrieve user accs

                $.ajax({

                type: "POST",
                url:  "get_info.php?keyword='+keyword+"&"count=20",

                beforeSend: function() 
  {
    $('#images').html("<img src='ajax-loader.gif'/>");
  },

  success: function(data)
{
$.getJSON('get_info.php?keyword='+keyword,function(data){
                    $("#instaUser").empty();

       $( "#images" ).fadeOut( "fast" ); 
   $("#instaUser").empty();
     // this is where we can loop through the results in the json object

     for (var i = 0; i <20; i++){ 
    if(i%4==0)
    $("#instaUser").append("<br>");
$("#instaUser").append("<figure style='display:inline-block'><img id='"+i+"' src='"+data.data[i].profile_picture+"' alt='pic number "+i+"' height='"+200+"' width='"+200+"'> <figcaption>@"+data.data[i].username+"</figcaption></figure>");
//  $("#instaUser").append("");



    }//end for
   $( "#images" ).fadeIn( "slow" );


});//end getJSON    

} 
});
}

</script>
 </head>
<body>
<header>
Instagram User Search
<span style=" margin-left: 400px; margin-right: auto;font-family:Times New Roman, Times, serif;">Search     
<input id="search" type="text" onchange="getUsers()" >
</div>
</header>
<article>
<section>
<h1 id="name" style="text-align: center; font-family:cashC; color:#95B9C7;     text-shadow: 1px 2px #000000;">
</h1>
<div id="images" style="text-align: center ;">
<div id="instaUser" style="font-family:Times New Roman, Times, serif">

</div>
</div>
</section>
</article>
 </body>
</html>

就像gif正在经历一个无限循环但我不知道我的代码中究竟出现了什么问题

加载gif不断出现而没有任何输出

0 个答案: