jquery - Ajax を使用して Flexslider に画像を挿入する

Question

私のサイトには flexsider があり、リンクされた画像をそこに引っ張って動的なスライド ショーを表示したいと考えています。ただし、現在の設定は機能しますが、常に表示されるわけではありません。この問題を修正するにはどうすればよいですか。画像とそのリンクを JSON Web サービスから取得します。私のコードは以下の通りです：

Ajax //featuredtracks ページのリストをロード

$(document).on( "pagebeforeshow", "#pagename", function( e ) {
 //ajax stuff
});

//callback function 
  function pagenamecallback(rtndata) 
 { 
   rtndata;
   var data= $("#featured");
   for(j=0;j<=songs.length -1;j++)
   {
         var a = $("<a href='./page.html' data-transition='fade'><img src='"+ rtndata[j].track_art_url + "' style='width: 300px; height: 300px; margin: auto;' alt='featuredimage'></a>");

    data.append($("<li></li>").append(a));
}

}

JS

$(document).on("pageshow", "#pagename", function( e ) {
$('.flexslider').flexslider({
    randomize: true,
    animation: "slide"
});
});

HTML

 <div class="flexslider">
  <ul class="slides" id="featured">
  </ul>
 </div>