jQuery循环插件-有没有办法知道寻呼机什么时候准备好了

Question

我正在尝试将Malsup的jQuery Cycle插件与jCarousel一起使用，以允许我的分页中的缩略图水平滚动，而且效果良好。问题是，有时jcarousel插件没有初始化，因为我认为分页还没有准备好。我的代码如下：

$('#slideshow').cycle({
    timeout : 0,
    speed   : 1000,
    pager   : '#image-carousel ul',
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="107" height="80" /></a></li>'; 
    }
});
$('#image-carousel').jcarousel();

有时当页面加载jcarousel不起作用时，我使用setTimeout将其初始化延迟约2秒，并且每次都起作用，所以我认为这一定是因为有时寻呼机还没有准备好。我现在可以接受setTimeout解决方案，但我认为必须有更好的方法来处理它。

Answer 1

绕过它的一种方法是，如果您对更改循环插件的源代码感到满意，可以包含一个名为onPagerBuilt（或其他东西）的回调，以便在构建分页后运行。修改cycle.js中的buildPager()函数，如下所示：

function buildPager(els, opts) {
    var $p = $(opts.pager);
    $.each(els, function(i,o) {
        $.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
    });
    opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);
        // add this line
        if (typeof opts.onPagerBuilt == 'function') opts.onPagerBuilt();
};

然后，您需要在该列表中的某个位置为$.fn.cycle.defaults添加一个默认值：

$.fn.cycle.defaults = {
  onPagerBuilt: null, // the callback to be run after pagination is built.
  // rest of the default options
  //...
}

然后你的脚本会是这样的：

$('#slideshow').cycle({
    timeout : 0,
    speed   : 1000,
    pager   : '#image-carousel ul',
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="107" height="80" /></a></li>'; 
    },
    onPagerBuilt: function () {
        $('#image-carousel').jcarousel();
    }
});