我试图通过使用背景图像div而不仅仅是一个普通的图像来提高我的bootstrap旋转木马。背景图像更加灵活和易于使用,但我遇到了图像问题。一旦出现新的幻灯片,就没有图像,但一秒钟后就会出现。奇怪的图像加载引导传送带?
如果您单击按钮,它看起来像下一个图像是空的,但它突然出现。任何想法如何我可以解决这个问题?
我试图通过使用背景图像div而不仅仅是一个普通的图像来提高我的bootstrap旋转木马。背景图像更加灵活和易于使用,但我遇到了图像问题。一旦出现新的幻灯片,就没有图像,但一秒钟后就会出现。奇怪的图像加载引导传送带?
如果您单击按钮,它看起来像下一个图像是空的,但它突然出现。任何想法如何我可以解决这个问题?
你应该在传送带自己尝试之前异步加载图像。有几种方法可以做到这一点,但我会使用一些JavaScript,如下所示:
<script>
var img = new Image(),
url = "myimg.jpg",
container = document.getElementById("holder-div");
img.onload = function() { container.appendChild(img); };
img.src = url;
</script>
您可以在传送带显示它们之前为每个需要加载的图像执行此操作。
如何使用背景图像改善旋转木马?看起来像你只是增加了更多的代码到页面上,让自己变得更加困难 - 而且可能是用户。 – timgavin 2015-05-10 18:41:04