bxSlider 在 Chrome 的第一次加载时不工作

Question

所以我使用 bxSlider 就像这个 page 上显示的网站一样，事情是 first load 滑块箭头显示但我的图像不显示。

在第二次加载（页面刷新）时，它工作得很好。此问题仅在 Chrome 上。

Edge、Firefox、IE 在首次加载时显示滑块图像没有问题。

现在我知道代码片段有效，我无法在代码片段中复制问题，但这里有一个 link 到页面，click me，MVC 不喜欢 links 而不是外部页面，但正如所说不能复制这个？这是 chrome 错误吗，我无法修复？

我也像我的网站一样使用版本 jquery/1.11.0，但是如下所示，不要认为版本是问题。

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

</head>
<body>

  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>

</body>
</html>

Answer 1

看起来你的初始化函数 $('.slider').bxSlider() 在你的 bxslider.js 加载之前执行...

...因此请尝试在页面加载后使用 $(window).on("load")

初始化您的 $('.slider').bxSlider()

$(window).on('load', function() {
  $('.slider').bxSlider();
})

bxSlider 在 Chrome 的第一次加载时不工作

bxSlider not working on first load for Chrome

html

css

jquery

bxslider