Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
462 views
in Technique[技术] by (71.8m points)

javascript - 如何在页面加载完成之前显示页面加载div(How to show Page Loading div until the page has finished loading)

I have a section on our website that loads quite slowly as it's doing some intensive calls.(我在我们的网站上有一个部分加载非常慢,因为它正在进行一些密集的调用。)


Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?(任何想法我怎么能得到一个div来说出类似于“加载”的东西,当页面准备自己然后在一切准备就绪时消失?)   ask by Shadi Almosri translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I've needed this and after some research on the internet I came up with this (jQuery needed):(我需要这个,经过互联网上的一些研究后我想出了这个(需要jQuery):)

First right after the body tag add this:(首先在body标签后添加:)

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Then add the style class for the div and image to your CSS:(然后将div和image的样式类添加到CSS:)

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

And finally add this javascript to your page (preferably at the end of your page, before closing <body> tag of course):(最后将这个javascript添加到您的页面(最好在页面的末尾,然后在关闭<body>标签之前):)

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

Then adjust the position of the loading image and the background colour of the loading div with the help style class.(然后使用帮助样式类调整加载图像的位置和加载div的背景颜色。)

This is it, works just fine.(这就是它,工作得很好。)

But of course you have to have an ajax-loader.gif somewhere.(但是当然你必须在某个地方有一个ajax-loader.gif 。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...