jquery - 加载 gif 直到整页加载

Question

我在我的网站上使用它来显示加载 gif，直到我的页面加载完毕。

它有点工作。

$(window).load(function(){
    $('#overlay').fadeOut();
});

HTML:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

但是，gif 很快就会消失。当加载 gif 消失时，我的图片还没有完全加载。我必须如何编辑此代码才能显示正在加载的 gif，直到所有内容都加载到我的页面上？

Answer 1

正如 Arijit 所说，您可以在 fadeOut() 上设置一个计时器功能

DEMO

---

或者显示一个 .gif 加载器直到图像准备好使用这个:

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

一旦页面被加载并且窗口准备就绪，使用这个:

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

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

您还可以使用图像占位符 onbeforeload 因此它只显示占位符而不是图像。

加载图片后，占位符将替换为实际图片。

---

我最后的选择可能是这个插件。 ImagesLoaded

祝你好运!