bxSlider 在首次加载 Chrome 时无法工作

Yla*_*ama 2 html css jquery bxslider

所以我使用bxSlider就像本页所示的网站一样,首先加载滑块箭头显示,但我的图像不显示。

第二次加载(页面刷新)时,它工作得很好。此问题仅在 Chrome 上出现。

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

现在我知道该代码片段有效,我无法在代码片段中重复该问题,但这里有一个指向该页面的链接,请单击我,MVC 不喜欢指向外部页面的链接,但正如所说的不能重复这个?这是 chrome 的 bug,我无法修复吗?

我也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>
Run Code Online (Sandbox Code Playgroud)

Bhu*_*wan 5

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

...所以尝试$('.slider').bxSlider()在页面加载后使用$(window).on("load")

$(window).on('load', function() {
  $('.slider').bxSlider();
})
Run Code Online (Sandbox Code Playgroud)