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>

我已经开始搜索图像预加载但我找不到任何非常符合我想要的内容。我应该关注哪个方向？也许ajax / jquery插件？

谢谢！埃里克

Answer 1

显示gif加载器，直到图像准备就绪

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

加载页面并准备好窗口后使用

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

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

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

希望这有帮助

Answer 2

imagesLoaded可能就是你要找的东西

检测图像何时加载。

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

用法非常简单：

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

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

Answer 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>

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

3 个答案: