jquery.cycle スライドショープラグインと Ajax を組み合わせる際の注意

jQuery

$.get() や $.load() 等の Ajax メソッドで画像を取得し、jquery.cycle プラグインでスライドショー表示させようとするも、なかなか上手くいかない場合、Firebug に [cycle] terminating; zero elements found by selector が出ているのではないでしょうか。
以下のプログラムは、スライドショーが失敗した例です。

// wrong example
$(document).ready(function() {
  // Ajax
  $.get(uri, {'alt': 'json'}, function(json) {
    // callback
    $.each(json.feed.entry, function(i) {
      // 以下の DOM 要素を作成、挿入する処理
      // <div class="slideshow">
      //   <img src="***" />
      //   <img src="***" />
      //   <img src="***" />
      // </div>
      //
    });  // each
  }, 'jsonp');  // get

  // jquery.cycle
  $('.slideshow').cycle();
};

Ajax メソッドは処理が後回しになるためか、div.slideshow(DOM 要素) が挿入される前に $.cycle() が実行されていたようです。
従って、$.cycle() を Ajax コールバック関数の最後で実行することで対処できます。

// correct example
$(document).ready(function() {
  // Ajax
  $.get(uri, {'alt': 'json'}, function(json) {
    // callback
    $.each(json.feed.entry, function(i) {
      // 以下の DOM 要素を作成、挿入する処理
      // <div class="slideshow">
      //   <img src="***" />
      //   <img src="***" />
      //   <img src="***" />
      // </div>
      //
    });  // each

    // jquery.cycle : Ajax コールバック関数の最後で実行
    $('.slideshow').cycle();

  }, 'jsonp');  // get
};
  • 参考サイト

jQuery Cycle Plugin (zero element?) - Stack Overflow

  • 追記

ajax(options:Map) であれば complete コールバック関数が利用できます。
complete オプションは、success コールバック関数の後に実行されるコールバック関数です。

$.ajax({
  url: uri,
  data: {'alt': 'json'},
  dataType: 'jsonp',
  success: function(json) {
    $.each(json.feed.entry, function(i) {
      // 以下の DOM 要素を作成、挿入する処理
      // <div class="slideshow">
      //   <img src="***" />
      //   <img src="***" />
      //   <img src="***" />
      // </div>
      //
    });  // each
  },  // success
  complete: function() {
    $('.slideshow').cycle();  // jquery.cycle
  }  // complete
});

この場合、$.ajax(options) のほうが $.load(url, data, callback) や $.get(url, data, callback, type) といった Ajax ショートカットメソッドより整然とした書き方ができます。