Question

我在我的大部分应用程序中都使用bootstrap carousel，我很喜欢它们，它们设置简单快捷。我只有一个问题：

当网站正在加载时，旋转木马没有高度（因为图像没有加载）
当图像加载旋转木马“跳跃”或增加到高度图像

我希望做的是实现一个加载器gif，而bootstraps图像仍在加载？

目前我有一个在文档准备好之前调用的加载程序gif，它可以正常工作但是当页面很长时，旋转木马将会出现“加载”，因为页面下方还有更多图像还在加载。任何帮助表示赞赏！

Answer 1

您能否尝试应用以下逻辑

1）假设您的轮播有4个图像，如：

<div class="carousel-inner">
    <div class="item active">
      <img src="img_flower1.jpg" alt="Flower" onload="javascript:imageloaded(1);" >
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower" onload="javascript:imageloaded(2);">
    </div>

    <div class="item">
      <img src="img_flower3.jpg" alt="Flower" onload="javascript:imageloaded(3);">
    </div>

    <div class="item">
      <img src="img_flower4.jpg" alt="Flower" onload="javascript:imageloaded(4);">
    </div>
  </div>

我们在这里添加了onload函数调用。

2）创建全局级JavaScript数组

var loadedImages = [];

3）function imageloaded()会有类似这样的内容：

function imageloaded(imgNumber)
{
    if($.inArray(imgNumber, loadedImages ) == -1)
    {
        loadedImages.push(imgNumber);
    }

    if(loadedImages.length == 4) //number of images/item you have in your carousel
    {
        //Write here logic to hide 'loading' symbol and show bootstrap carousel
    }
}

是否有任何Bootsrap Carousel准备回拨或类似的东西？

1 个答案: