Problem with Pre-Loaders

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

YYashwanth

Thread Starter
Joined
Mar 28, 2015
Messages
20
Hello All,

I designed a website and added a preloader to it. But the preloader is appearing on the top left corner instead of center of the page. The page has to be invisible while the preloader is going on but the site is completely visible. As soon as the site loads completely, the preloader vanishes perfectly.

Have a look at the site : www.techkrafters.com

I want the preloader to appear in the center of the screen and the site to be invisible while the preloader function is being executed.

Thanks in advance for your help,

Cheers,
Yashwanth.
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
Hi YYashwanth and welcome to TSG:)
You could try replacing your inline css ...
Code:
.loaderClass

{

position: absolute;

top: 0px;

left: 0px;

z-index: 999999;

text-align: center;

width: 100%;

height: 200px

}
with this ...
Code:
#loading_div

{

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 10;

background: url('Preloader/loader.gif') 50% 50% no-repeat;

background-image: url('img/overlay.png');

}
... and put a suitable overlay.png (128px x 128px) into your img folder.
You could then change your html code from this ...
Code:
      <div id="loading_div">
         <img src="Preloader/loader.gif"  height="66" width="66"><br>
     </div>
... to this ...
Code:
      <div id="loading_div"></div>
The styling which centres your loader image is the '50% 50% no-repeat;' and of course in order to temporarily hide your page rendering we include the overlay png ;)

The 'loaderClass' has been dropped because you never used it.

This code has not been tested ('twas off the top of my head), and may require some tuning, but it should work;)
 

YYashwanth

Thread Starter
Joined
Mar 28, 2015
Messages
20
Hello JiminSA, I tried which you suggested but there was no change. The overlay.png was visible and it covered the website. But the preloader was not visible :( . I tried every possible combination but still there was no change so I had to undo the changes because , the structure of the site got changed for some reason which I could not understand.

Could you please help me out with this ? :(
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
N.B. Changed from original post
OK let's try drop the z-index and use backgound stacking, (described here), as follows
FROM
Code:
z-index: 10;

background: url('Preloader/loader.gif') 50% 50% no-repeat;

background-image: url('img/overlay.png');
TO
Code:
background: url('Preloader/loader.gif') 50% 50% no-repeat,
            url('img/overlay.png');
and see what happens ...
 

YYashwanth

Thread Starter
Joined
Mar 28, 2015
Messages
20
Hello JiminSA. I did the changes as said and it worked perfectly for the preloader to be at the center. But the website is still visible. If i scroll down, the preloader still turns and the site overlaps the preloader.

Please let me know how to get this sorted.

Thanks a lot for your help.
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
Which shows me nothing of what the code I suggested is doing ... if you could reinstate that code, please, I'd be grateful. It appears that your animated cube may be dominating the pre-load ...
 

YYashwanth

Thread Starter
Joined
Mar 28, 2015
Messages
20
Oops .. Sorry . I restored the preloader code and I have a doubt, when a site is opened, the preloader should appear first right ? but nothing happens for the first few seconds and the preloader appears with the rest of the site. :( . What could be the error ?
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
Yes, thank you. have you left out the javascript to fade out the loading div??
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
<body id="top" onLoad="loadingDivHide()">
I don't see the javascript function in your html source code? Is it tucked away in one of your javascript files somewhere?
Because when I link to your site, the loading div remains after body load completes!
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
Sorry I got side tracked - Yes I didn't see it initially! The page now renders OK, but the cube is indeed dominant over the pre-load display - which I presume is the small revolving cube on a white background?
I shall investigate why the main cube is dominant during load and report back ...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top