带有 classyloader 的猫头鹰轮播循环进度条会给出 getContext 错误

Question

我正在尝试在猫头鹰轮播和 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上实例化，从您链接的页面：

接下来，创建要在其上触发插件的 canvas 元素。

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

注意：您将在更正的代码笔中看到，幻灯片的 CSS 可能会遇到额外的问题(它们没有显示，可能与 owl 轮播样式冲突(。我任意选择将画布设置为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
});
}
});
});