在加载所有图像之前显示加载 gif？答案

【问题标题】：Show loading gif until all images are loaded?在加载所有图像之前显示加载 gif？
【发布时间】：2014-01-30 22:07:23
【问题描述】：

我正在使用 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 插件？

谢谢！埃里克

【问题讨论】：

您可以编写一个简单的 jquery 脚本，该脚本显示一个 div（其中包含一个微调器），直到所有图像都加载了 .load()

标签： jquery ajax twitter-bootstrap preloader image-preloader

【解决方案1】：

在图像准备好使用之前显示 gif 加载器

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

一旦页面加载完毕，窗口就可以使用了

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

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

您还可以在加载前使用图像占位符，这样它将仅显示占位符而不是图像。加载图像后，占位符将替换为实际图像。

希望对你有帮助

【讨论】：

注意，用于绑定到加载事件的.load 在 jquery 1.8 中已被弃用，并在 1.9 中被删除。请改用.on("load"。

【解决方案2】：

imagesLoaded 可能就是你要找的东西

检测图像何时加载。

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

用法很简单：

首先显示加载图片，然后用一行 JS 隐藏它：

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

【讨论】：

【解决方案3】：

您好，请检查以下小提琴，默认显示加载器，将 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>

【讨论】：