2014-10-26 51 views
2

我试图通过使用背景图像div而不仅仅是一个普通的图像来提高我的bootstrap旋转木马。背景图像更加灵活和易于使用,但我遇到了图像问题。一旦出现新的幻灯片,就没有图像,但一秒钟后就会出现。奇怪的图像加载引导传送带?

如果您单击按钮,它看起来像下一个图像是空的,但它突然出现。任何想法如何我可以解决这个问题?

+0

如何使用背景图像改善旋转木马?看起来像你只是增加了更多的代码到页面上,让自己变得更加困难 - 而且可能是用户。 – timgavin 2015-05-10 18:41:04

回答

0

这会随着背景图片加载速度的缓慢而增加,或者增加你的服务器或者把图片改成正常的图片那你要做什么需要背景图片?

+0

*“背景图像加载速度较慢”*如何?为什么?这不是真的。 – worldofjr 2014-10-26 22:47:11

+0

页面稍后调用它们 – Alex 2014-10-26 22:47:50

+0

所以它们加载速度并不慢。无论如何,你错了。它们按照在代码中被调用的顺序加载。 – worldofjr 2014-10-26 22:48:54

0

你应该在传送带自己尝试之前异步加载图像。有几种方法可以做到这一点,但我会使用一些JavaScript,如下所示:

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

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

您可以在传送带显示它们之前为每个需要加载的图像执行此操作。