加载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

祝你好运！