如何在加载完整的html页面之前显示加载gif [英] How can I display a loading gif until an entire html page has been loaded

问题描述

我有一个通过HTML和CSS非常密集的网页，当用户访问页面时，会导致一些元素加载速度加快。背景可能需要一段时间才能加载，等等......它看起来非常难看，它全部加载元素...

所以我想知道我可以先加载一个不同的页面（page1，它只有一个gif和最小的html），然后page2（带有密集html的页面）仅在客户端的浏览器已经获取所有页面html后才会出现。

我相信这可以通过JQuery完成，而我几乎不知道...

任何建议感谢，
谢谢，

解决方案

使用以下HTML：

 < div id =loading>< / div> 
  

而这个CSS：

  #loading {
 position：absolute;宽度：100％;身高：100％;背景：url（'spinner.gif'）无重复中心; 
} 
  

以下jQuery：

  $（window）.ready（function（）{
 $（'＃loading'）。hide（）; 
}）; 
  

另外，您可以使用 https://www.askapache.com/online-tools/base64-image-converter/ 将您的GIF转换为基本64字符串，并使用它来代替 spinner.gif 。

I have a webpage that's pretty intensive via HTML and CSS, which leads to some elements loading faster then others when a user visits the page. The background may take awhile to load, and so on... It gets pretty ugly seeing it all load element by element...

So I'm wondering how I can first load a different page (page1, that has simply a gif and bare minimals of html) and then page2 (page with intensive html) will appear only after the client's browser has fetched all of the pages html.

I believe this can be done with JQuery, which I know almost nothing about...

Any advice would be appreciated, Thanks,

解决方案

Use the following HTML:

<div id="loading"></div>

And this CSS:

#loading {
    position: absolute; width: 100%; height: 100%; background: url('spinner.gif') no-repeat center center;
}

And the following jQuery:

$(window).ready(function() {
    $('#loading').hide();
});

Also, you could use https://www.askapache.com/online-tools/base64-image-converter/ to convert your GIF to a base 64 string, and use that instead of spinner.gif.

这篇关于如何在加载完整的html页面之前显示加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！