在ready回调或类似的东西上有任何引导旋转木马吗?

Is there any Bootsrap Carousel on ready callback or something similar?

本文关键字：任何引 旋转木马 回调 ready      更新时间：2023-09-26

我在我的大多数应用程序上使用bootstrap carousel，我喜欢它们，它们快速且易于设置。我只有一个问题:

  • 由于网站正在加载，旋转木马没有高度(因为图像尚未加载)
  • 当图像加载时，旋转木马"跳跃"或增加到的高度图片

我希望做的是实现一个加载器gif而引导图像仍在加载?

此刻，我有一个加载器gif，这是在文档准备好之前调用的，它工作得很好，但是当页面很长时，那么轮询器将出现"加载"，因为有更多的图像在页面下方仍在加载。任何帮助，感谢!

请尝试应用以下逻辑

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
    }
}
相关文章：