Question

我正在尝试将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解决方案，但我认为必须有更好的方法来解决这个问题。

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();
    }
});

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

1 个答案: