引导转盘中奇怪的图像加载？

Question

我正在尝试通过使用具有背景图像的div而不仅仅是普通图像来改进我的自举轮播。背景图像更灵活，更易于使用，但我遇到了图像问题。一旦新的幻灯片出现，就没有图像，但是一秒钟之后就出现了。

如果单击按钮，看起来下一个图像为空，但随后会突然出现。关于如何解决这个问题的任何想法？

Answer 1

这种情况总会发生，因为背景图片的加载速度较慢，无论是增加服务器还是将图像更改为正常图像，您尝试做什么都需要背景图像？

Answer 2

您应该在轮播尝试之前异步加载图像。有几种方法可以做到这一点，但我会使用一些javascript如下;

<script>
    var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

    img.onload = function () { container.appendChild(img); };
    img.src = url;
</script>

您可以在轮播显示之前为每个需要加载的图像执行此操作。