Preload a website

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

Are you sure you want to do this? Many studies have shown that users get bored and leave sites very very quickly – optimising the first load is worth doing, and this really goes against this. I understand that you need images for the transitions etc, but perhaps load them in the background once the bare minimum to show the site is available. — Rich Bradshaw, May 14 '11 at 18:51
You can try this http://www.chillipear.com/plugins/preloader/ — nmsdvid, Jun 25 '12 at 08:54

score 8 · Accepted Answer · edited Aug 27 '16 at 19:11

8

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/

edited Aug 27 '16 at 19:11

HarshWombat

159
2
2
8

answered May 14 '11 at 17:58

Andrei Sfat

8,440
5
49
69

Thats what I used but i want it to load the entire site not just that one page do i need to import the other files because I tried and that didn't work??? – BDGapps May 14 '11 at 18:01

Aleksandar · Answer 2 · 2016-02-11T22:16:56.073

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)

You can insert preload image to be more interesting for users. Just replace Loading text with image and thats it. — Aleksandar, Nov 08 '12 at 03:52

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

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>

edited May 23 '17 at 10:29

Community

1
1

answered May 14 '11 at 18:47

But I only what it to load once... – BDGapps May 14 '11 at 18:55
well normally the browser caches a website so after the first visit it is loaded faster than at the first fisit so the user should see the preloafd animation just once aditionally you cold create a cookie that will be created at the first visit and so when the user visits your website at the next time, the script doesnt load when there is the cookie but you think wrong, because there woul be generally just once the preloader due the caching of the browser, hope you understand – May 14 '11 at 19:13
well, first i would check if the user sees the preloader just once normally, creating a cookie with php isnt so hard – May 14 '11 at 19:50
it doesnt work – BDGapps May 14 '11 at 20:25
2

– May 14 '11 at 20:42

score 0 · Answer 4 · edited Dec 29 '11 at 07:24

0

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

edited Dec 29 '11 at 07:24

sra

23,820
7
55
89

answered Dec 29 '11 at 06:46

STEEL

8,955
9
67
89

1

you should always provide the content of external links, otherwise your answer is worthless when the link breaks. I've done this for you. – sra Dec 29 '11 at 07:26

Preload a website

4 Answers4