Preload a website [closed]_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-05 17:55 出处：网络

Closed. This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 7 years ago.

开发者_JS百科 Improve this question

I'm looking to preload a website. I only want a loading bar once on the site. When its loading I want every page to pre load. How would I do this?

http://frankadvertisingus.com/fa_website/home.html

A Right Click for Source code can be helpful

Here is the source where you can find the jQuery for it. http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

you could replace or hide the body while it is loading and showing that the page loads and when its done the content is displayed

there was an older post here about this: How can I create a "Please Wait, Loading..." animation using jQuery?

should be that what you want

an html file for script ? think its just working with .js

well you have to add it on every page using

<script type="text/javascript" src="preload.js"></script>

Header

<script type="text/javascript">
 function hideLoadingLayer(){
 document.getElementById("loading_layer").style.visibility="hidden";
 }
 </script>

Body

<body onload="hideLoadingLayer();">

Div

<div id="loading_layer"><img src="images/loading.gif" alt="" width="550" height="400" border="0" /></div>

CSS

#loading_layer{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:999999;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}

Inserted from JavaScript (website) Web page preloader

EDIT

Ok, this question is old, and link provided is dead, and some users provide nice correction on how to make usable answer, I decided to edit my answer explaining the process behind preloading instead providing just a link.

Preloading webpage is simply displaying some text, image or something else while the page is rendering, to notify the visitors that something is happening in the background. Easiest way is to include jQuery which simplify the whole process. Our main goal is to display, let say text, while page is loading. So, our task is displaying text first, then when the page is fully loaded, hide text and display content.

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> // include jQuery source

 <script>
    $('.content').hide(); // hide content while rendering
    $(document).ready(function(){ // When page is fully loaded...
      $('.preload').hide(); // hide preloader
      $('.content').show(); // and show content
 });
<div class="preload">Loading...</div>
<div class="content">Some generic content here</div>

This is just basic example, and you can play with jQuery to make some nice preloaders.

ORIGINAL

This is my first preloader. It's very simple. While page is loading, it shows preloader, and then hide preloader and show page. Preload web site using jquery (simple)