显示加载gif直到加载所有图像？

Question

我正在使用Bootstrap 3构建一个投资组合网站,使用轮播作为完整背景.我想要的是能够显示加载gif,直到每个网站的图像阵列被加载,因为图像将是大的.

这是我正在使用的HTML代码.

<div class="carousel-inner">
  <div class="item active">
    <img src="./img/bg_01.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <div class="item">
    <img src="./img/bg_02.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

我已经google了关于图像预加载但我找不到任何非常适合我想要的内容.我应该关注哪个方向？也许ajax/jquery插件？

谢谢!埃里克

Answer 1

显示gif加载器,直到图像准备好使用

$(window).onbeforeload(function(){
//Your code here
})

一旦加载页面并且窗口准备好使用

$(window).load(function(){
//Your code here
});

仅当页面完全加载而不仅仅是页面的DOM时,LOAD事件才会触发.

您还可以在onbeload上使用图像占位符,这样它只会显示占位符而不是图像.加载图像后,占位符将替换为实际图像.

希望这可以帮助