-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (123 loc) · 5.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Preloader Script - Page Loading Script</title>
<link rel="stylesheet" href="loading.css">
<link rel="stylesheet" href="css.css">
<META NAME="description" CONTENT="Preloader Script - Page Loading Script shows a loading effect while the complete page loads - written by peham raza">
<META NAME="keywords" CONTENT="preloader, preloader script, jquery preloader, page loading, simple page loading effect">
<META NAME="robot" CONTENT="index,follow">
<META NAME="author" CONTENT="Peham Raza">
<META NAME="language" CONTENT="English">
</head>
<body onload="show_page()">
<div id="loading">
<h3>Loading...</h3>
<img src="loading.gif" alt="Loading" />
</div>
<div id="content" class="hideit">
<div id="header">
<a href=""><img id="logo" src="big_image.jpg" alt="" /></a>
<div id="header_desc">
<h1>Preloader Script - Page Loading Script</h1>
<h3>By <a href="http://pehamraza.com">Peham Raza</a></h3>
</div>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="http://blog.pehamraza.com">Blog</a></li>
<li><a href="http://github.com/pehamraza">GitHub</a></li>
<li><a href="https://github.com/pehamraza/preloader/fork">Fork on Github</a></li>
<li><a href="https://github.com/pehamraza/preloader/archive/master.zip" id="download">Download It</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="main">
<div id="main_top">
<h2>Introduction</h2>
<p class="intro">
This is a very simple and interesting page loading script. I have been searching for best preloader script on the internet from quite a long time and after trying many possible solutions I have got the simplest way to make a preloader that does not only loads the content but also the images. It is a very simple preloader script. If you need any further help do not hesitate to email me at <a href="mailto:m@pehamraza.com">m@pehamraza.com</a>
</p>
</div>
<div class="clear"></div>
<div id="main_left">
<!-- <img src="http://blog.rxprep.com/wp-content/uploads/2010/09/train-icon.png" alt="" class="keypoints_img" /> -->
<h2>Step by Step Guide:</h2>
<ol class="keypoints">
<li><h3>Files Information</h3>
<p>
This package contains 1 javascript, 2 css and 2 image files along with an index.html file. <br />
<code> 1. <u>index.html</u> //This is the main page<br />
2. <u>css.css</u> //The css file for the main page<br />
3. <u>loading.css</u> //The css file for the loading effect<br />
4. <u>js.js</u> //The javascript file to load content<br />
5. <u>big_image.jpg</u> //Logo to show images preloading<br />
6. <u>loading.gif</u> //The animation to show page loading<br />
</code>
</p>
</li>
<li><h3>The Loading Div</h3>
<p>
Make a div that will show the loading effect while the page will be loading,
<code> <div id="loading"><br />
<h3>Loading...</h3><br />
<img src="loading.gif" alt="Loading" /> <br />
</div>
</code>
</p>
</li>
<li><h3>Hide the main content</h3>
<p>
Add class on the main content div to hide it before complete page load, we used a class named "hideit" on the main content div that has an id "content"
<code><div id="content" class="hideit"></code>
The css for the "hideit" class is just,
<code>.hideit{display: none;}</code>
</li>
<li><h3>Hide Loading div and show Page</h3>
<p>
Use onload attribute on body tag to call the function on the page load,
<code> <body onload="show_page()"></code>
On page load we need to hide the loading div and show the original loaded web page. The javascript show_page() function removes the class using jquery-1y's removeClass() function to remove the class named "hideit".
<code>function show_page()<br />
{<br />
$('#loading').hide();<br />
$('#content').removeClass('hideit');<br />
}<br />
</code>
</li>
</ol>
</div>
<div id="main_right">
<h2>The Key Points:</h2>
<ol class="keypoints">
<li><h3>Use Display Attribute</h3>
<p>
Most of people have been trying the script by hidding the main content div using the following css attribute,
<code>» visibility: hidden;</code>
But instead of using the visibility attribute you will have to use,
<code>» display: none;</code>
</p>
</li>
<li><h3>Call the javascript function on body tag</h3>
<p>
Use onload attribute on body tag to call the function on the page load,
<code> <body onload="show_page()"></code>
</li>
<li><h3>Don't forget to include Jquery</h3>
<p>
Add the script tags to the bottom of the page just before the </body> tag
<code> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<br /><script src="js.js"></script></code>
</li>
<li><h3>The Best Part</h3>
<p>
The best part is that the script will also preload the images. You don't need to add any third party javascript plugins to do that. :)
</li>
</ol>
</div>
<div class="clear"></div>
<div id="footer"><p>This Tutorial is written as a contribution to the Open Source Community by Peham Raza</p></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>