在所有图像加载完成之前显示加载动画？

Question

我正在使用Bootstrap 3构建一个作品集网站，并使用旋转木马作为全背景。我的目标是在每个网页的图像数组加载完成之前显示一个loading 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>

我已经使用谷歌搜索了有关图像预加载的信息，但没有找到完全符合我所需的内容。你有什么建议？也许可以考虑使用ajax/jquery插件吗？

谢谢！ Eric

- Eric Mitjans

---

你可以编写一个简单的jQuery脚本，使用.load()方法显示一个带有旋转图标的div，直到所有图片都加载完成。 - ntgCleaner

Answer 1

使用gif加载器，直到图片准备好为止：

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

页面加载完成并且窗口准备好之后，使用以下方法：

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

LOAD事件只有在页面完全加载完成后才会触发，而不仅仅是页面的DOM。

您也可以在onbeforeload中使用图像占位符，这样它就只会显示占位符，而不是图像。一旦图像加载完成，占位符将被实际图像替换。

希望这可以帮助您。

- James

---

注意，自jQuery 1.8起，绑定到load事件的.load已被弃用，并在1.9中删除。请改用.on("load")。 - Kevin B

Answer 2

你好，请查看下面的代码片段。默认显示加载器，将onload事件绑定到img标签上，在函数调用时可以隐藏加载器。

http://jsfiddle.net/quDP4/

<div class="carousel-inner">
  <div class="item active">
      <div class="loader"></div>
    <img src="http://bartelme.at/material/hdr/hdr5.jpg" alt="" onload="loaded(this)" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
 </div>
</div>

<script>
function loaded(imgloaded)
{
imgloaded.previousElementSibling.style.display="none";

}
</script>

- melwyn pawar

Answer 3

imagesLoaded 可能是你正在寻找的内容

检测图像是否已加载完成。

演示：http://imagesloaded.desandro.com/
github：https://github.com/desandro/imagesloaded

使用起来非常简单：

最初显示加载图像，然后用一行JS隐藏它：

imagesLoaded( '#container', function() { //hide loader });

- gherkins