owl 使用 classyloader 的旋转木马循环进度条出现 getContext 错误

Question

我正在尝试在 owl 旋转木马和 ClassyLoader (https://andy.su/classyloader/) 中围绕点创建一个圆形进度条。一切都很好，但我遇到了这个错误 Cannot read property 'getContext' of undefined。

HTML

<div class="header-slider">
  <div class="header-slider-1">
    some slider content
  </div><!-- .header-slider-1 -->

  <div class="header-slider-2">
   some slider content
  </div><!-- .header-slider-2 -->

</div><!-- .header-slider -->

<div class="owl-dots" id="owldots">
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>

JS

<script type="text/javascript">
  /* ------------------------- Owl settings -------------------------- */
  jQuery(function($){
    $(document).ready(function() {
      var timeout = 5000;
      var owl = $('.header-slider').owlCarousel({
          items: 1,
          dots: true,
          nav: false,
          loop:true,
          autoplay: true,
          autoplayTimeout: timeout,
          dotsContainer: '#owldots',
          onChanged: function () {
              $(function() {
                  var loader = $('.header-slider .owl-dot.active .loader').ClassyLoader({
                      width: 60,
                      height: 60,
                      percentage: 100,
                      speed: 20,
                      animate: true,
                      showRemaining: false,
                      showText: false,
                      diameter: 20,
                      lineColor: 'rgba(245,206,12,1)',
                      lineWidth: 2
                  });
              })
          }
      });
    });
  });
</script>

知道如何让它工作吗？

Answer 1

您的代码有几个问题，但最重要的是：ClassyLoader 必须在 canvas 上实例化，来自您链接的页面：

Next, you create the canvas element on which you want to trigger the plugin.

另外正如我在评论中所说，$(function() { ... }); 是 $(document).ready(function() { ... }); 的别名。并且因为在您的代码中 $ 是 jQuery 的别名，所以可以简化它。我个人更喜欢文档就绪语法，它对未来读者的作用更加明显。

注意： 您会在 the corrected codepen 中看到您的幻灯片 CSS 可能会遇到其他问题（它们没有显示，可能与 owl 轮播样式冲突）。我随意选择将 canvas 设置为 fixed，因为它必须是一个单独的元素，这将使其显示在幻灯片上，但这可以改进。另请注意，由于您的语法（更改了笔设置），您需要使用 owl 版本 2，并且我直接复制了 ClassyLoader 代码，因为它在 filebin 中不起作用。

更正代码：

HTML:

<canvas class="header-loader"></canvas>
<div class="header-slider">
  <div class="header-slider-1">
    <p>some slider content 1</p>
  </div><!-- .header-slider-1 -->

  <div class="header-slider-2">
    <p>some slider content 2</p>
  </div><!-- .header-slider-2 -->
</div><!-- .header-slider -->

<div class="owl-dots" id="owldots">
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
  <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>

JS:

$(document).ready(function() { //you can also use "$(function() {" instead
  var timeout = 5000;
  var owl = $('.header-slider').owlCarousel({
    items: 1,
    dots: true,
    nav: false,
    loop:true,
    autoplay: true,
    autoplayTimeout: timeout,
    dotsContainer: '#owldots',
    onChanged: function () {
      //don't use "$(function() {" here!
      var loader = $('.header-loader').ClassyLoader({ //changed the class
        width: 60,
        height: 60,
        percentage: 100,
        speed: 20,
        animate: true,
        showRemaining: false,
        showText: false,
        diameter: 20,
        lineColor: 'rgba(245,206,12,1)',
        lineWidth: 2
      });
    }
  });
});

owl 使用 classyloader 的旋转木马循环进度条出现 getContext 错误

owl carousel circular progress bar with classyloader gives a getContext error

javascript

jquery

owl-carousel-2