在引导轮播中加载奇怪的图像？答案

【问题标题】：Odd image loading in bootstrap carousel?在引导轮播中加载奇怪的图像？
【发布时间】：2014-12-22 01:19:07
【问题描述】：

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

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

【问题讨论】：

使用背景图片如何改善轮播？似乎您只是在页面中添加了更多代码，让您自己和潜在的用户变得更加困难。

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

这总是会发生，因为背景图像加载速度较慢，要么增加您的服务器，要么将图像更改为普通图像，您想要做什么需要背景图像？

【讨论】：

“背景图片加载速度较慢” 怎么办？为什么？这不是真的。
页面稍后调用它们
因此它们的加载速度并不慢。无论如何，你错了。它们按照在代码中被调用的顺序加载。
在引导轮播中它们是因为它会在背景图像出现轻微的白色暂停之前检查要显示的图像
对。那么为什么不在轮播尝试自己之前异步加载图像呢？