Question

我有一个带有全屏背景轮播和窗口加载的加载GIF的网站。问题是，根据网站的不同，我在旋转木马上有10到40张图片，这意味着加载的gif会旋转太长时间。

我认为只有在加载前5张图像之前才真正显示加载gif是个好主意。这加上显示每个图像的10秒，为其他图像加载提供了足够的时间。

问题是我不知道如何处理这个解决方案。有什么想法吗？

这是我的jquery：

<script type="text/javascript">
  var image = new Image();
  image.src = 'img/loading.gif';
//<![CDATA[
  $(window).load(function() { // makes sure the whole site is loaded
    $('#status').fadeOut(); // will first fade out the loading animation
    $('#preloader').delay(350).fadeOut('slow', function(){
      $( "#carousel-example-generic" ).attr('data-ride', "carousel");
    }); // will fade out the white DIV that covers the website.
    $('body').delay(350).css({'overflow':'visible'});
  });
//]]>
</script>

我的HTML：

<div id="carousel-example-generic" class="carousel slide" data-ride="0">

<div class="carousel-inner">
 <div class="item active">
    <img src="./img/1.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/2.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/3.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/4.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/5.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/6.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/7.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/8.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/9.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/10.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

Answer 1

找到了一个简单方便的方法！

<script>  
var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 3){
        //kill loading screen, launch carousel
    }
}    

image1 = new Image();
image1.src = "img/1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "img/2.jpg"
image2.onload = incrementAndCheckLoading;
image3 = new Image();
image3.src = "img/3.jpg"
image3.onload = incrementAndCheckLoading;
</script>

使用此脚本，加载第一个图像时加载屏幕将消失，并且因为每个图像在x秒内显示，所以网站有时间加载背面的其他图像。

感谢dtech，找到here。

仅显示加载gif，直到加载了一定数量的图像

1 个答案: