bxslider 不等待 chrome 中的图像；跳到最后一张幻灯片

Question

如果你去http://sandkasse.shoporama.dk/，你会在页面顶部看到一个bxslide。至少，如果你不使用 chrome，你会的（特别是，这个问题似乎不会出现在 safari、IE 或 firefox 中）。

我经常遇到这样的问题：从 chrome 加载页面时，bxslider 中使用的图像无法加载。刷新通常可以解决问题。我得到的只是切换幻灯片的两个按钮，但是单击它们时没有任何反应。

我没有收到任何错误消息。

我假设问题是图像没有完成加载时 $('.bxslider').bxSlider();在 $(document).ready(function(){}) 中调用。 但是，有什么好的解决方法呢？如果我将 bxslider 调用移动到 window.load，我会得到一个有点丑陋的结果，即幻灯片中的所有图像都显示，直到整个页面完成加载，并且宽度和样式错误。我想我可以在页面加载完成之前更改所有图像的可见性和样式，但这似乎更像是一种 hack 而不是解决方案？

使用某种图像加载事件而不是 document.ready 是一个明智的选择吗？无论如何，都包含 imagesloaded 包。但是，我怀疑我会遇到相同的问题，即在最后一张加载之前显示所有图像？

一个相关的问题可能是当页面加载时滑块总是跳到最后一张幻灯片，无论使用哪种浏览器。我已经通过手动设置“startSlide”来“修复”这个问题。

我希望我的问题是有道理的。我知道这里有很多 bxslider 问题，但我找不到任何人解决这个特定问题，除了人们“放弃”并在加载时仅隐藏图像？

Answer 1

我可能想出了一个适当的非 hacky 解决方案：

在 window.load 调用中重新加载滑块。因此，我的 bxslider 调用已转换为：

var slider; // has to be defined beforehand so I can use it in window.load
$(document).ready(function(){
//initialize slider
slider = $('.bxslider').bxSlider({
 startSlide:0
});
};)

$(window).load(function() {
  slider.reloadSlider();

 });