Javascript 进度条仅在第一次转换之后启动：Jquery Cycle2

我使用jQuery Cycle2脚本进行带有进度条的幻灯片放映。我正在使用jqueryv1.12.4

进度条仅在幻灯片过渡后开始工作。第一张幻灯片将在栏中不显示进度，但将过渡到下一张幻灯片。在此转换之后，进度条开始工作。它在所有情况下都能工作：导航到上一个或下一个、暂停悬停、使用缩略图导航等

Cycle2脚本加载在页脚之后。调用cycle函数的脚本文件在此之后加载

我用于进度条的代码几乎直接取自示例：

        jQuery(document).ready(function($) {

        var slideshow = jQuery('.cycle-slider').cycle();
        var progress = jQuery('#progress');

        slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) {
        progress.stop(true).css( 'width', 0 );
        });

        slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) {
        if ( ! slideshow.is('.cycle-paused') )
            progress.animate({ width: '100%' }, opts.timeout, 'linear' );
        });

        slideshow.on( 'cycle-paused', function( e, opts ) {
         progress.stop(); 
        });

        slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
        progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
        });

        });

该示例显示立即启动的进度条

---

什么会导致进度条只在转换后启动？

您解决了这个问题吗？我通过调用“暂停”然后在转换后立即调用“恢复”解决了这个问题。这样，在第一次运行时就会触发进度条。也许不是最优的，但它是有效的。