加载gif直到整个页面加载 [英] Load gif until full page load

问题描述

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

I'm using this for my site to display a loading gif until my page is loaded.

有点工作.

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

HTML:

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

但是，gif很快消失了.当加载的gif消失时，我的图像还没有完全加载.我该如何编辑此代码，以便它显示加载的gif，直到页面上的所有内容都加载完毕?

But, the gif disappears to soon. My images aren't fully loaded yet when the loading gif disappears. How do I have to edit this code so it will show the loading gif until EVERYTHING is loaded on my page?

推荐答案

就像Arijit所说的那样，您可以在

Like Arijit said, you can set a timer on the fadeOut() function

演示

或者要显示 .gif 加载程序，直到准备好映像为止，请使用以下命令:

Or to show a .gif loader until image(s) are ready use this:

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

一旦页面被加载且窗口已准备就绪，请使用此:

Once the page is loaded and window is ready use this:

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

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

The load event will only trigger when the page is fully loaded, not just the DOM of the page.

您还可以使用图像占位符onbeforeload，因此它仅显示占位符，而不显示图像.

You can also use image placeholders onbeforeload so it only shows placeholders instead of the image(s).

一旦加载图片，占位符将被替换为实际图片.

Once image(s) is loaded, placeholders will be replaced with the actual image(s).

我为您提供的最后一个替代方法可能是该插件. 已加载图片

My last alternative for you could be this plugin instead. ImagesLoaded

祝你好运！

这篇关于加载gif直到整个页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！