jQuery 循环插件 - 有没有办法知道寻呼机何时准备就绪？答案

【问题标题】：jQuery cycle plugin - Is there a way to know when pager is ready?jQuery 循环插件 - 有没有办法知道寻呼机何时准备就绪？
【发布时间】：2012-03-08 13:19:39
【问题描述】：

我正在尝试将Malsup's jQuery Cycle plugin 与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 解决方案，但我认为必须有更好的方法来处理这个问题。

【问题讨论】：

标签： jquery jcarousel jquery-cycle

【解决方案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();
    }
});

【讨论】：