Preload script

**Ready** · 05-22-2006, 03:22 AM

I am wondering about a script from DD. I dont' understand what causes it to load. It doesn't indicate what I do with this extra page that is hidden that loads all the images. Do I put something in my .index page that will open this other page (first)?

Here is the script I am trying use (figure out) from DD

**jscheuer1** · 05-22-2006, 05:47 AM

If you are using this to preload images for your index page, you would need to rename your index page to like index2.htm and have that be the page to switch to after preload and name the preload page to index.htm. This is not the best situation for search engines though to say the least. If preloading images on your main index page is your goal, a different script, one that works on that page would be far preferable. Something like:

Preload Image (with progress bar) Script 2

**Ready** · 05-22-2006, 07:30 AM

I just tried this one. It worked.....but it appears under my page. I have a very large display area (resolution 1920x1440) on my computer so I could see it poking out on the right side, but any other person wouldn't see the animated bar. Any ideas why this is happening?

Thanks, BTW (jscheuer1)

**jscheuer1** · 05-22-2006, 08:57 AM

That is a layout problem. If you've followed the installation instructions exactly as written on the demo page, it probably means that the techniques used to position the progress bar on a page don't work with your layout and would need to be tweaked to do so.

Of course, it could be that you missed an important part of the instructions.

Please post a link to the page on your site that contains the problematic script so we can check it out.

**Ready** · 05-22-2006, 01:44 PM

Here is the link: Site

This is part I modified (except for putting in my image):
Thanks again.

Code:

var yposition=400;                                  //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='black' ;                // PROGRESS BAR COLOR
var unloadedcolor='yellow';                   // BGCOLOR OF UNLOADED AREA
var barheight=25;                                 // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=700;                                // WIDTH OF THE BAR IN PIXELS  
var bordercolor='black';                       // COLOR OF THE BORDER

**jscheuer1** · 05-22-2006, 05:39 PM

There are two problems, the first is layout. To fix that, open the script in a text editor and change this:

Code:

var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';

to:

Code:

var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute;z-index:100; visibility:hidden; background-color:'+bordercolor+'">';

The second problem is a conflict with your animate script. I think this is only a problem in FF but, should be resolved. Remove this from the script:

Code:

window.onload=loadimages;

Add it to your body tag like so:

Code:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#800080"   topmargin="0" onload="dynAnimation();loadimages();">

In IE and Opera, the rightmost part of the bar will still appear somewhat to the right of the layout if the window is wider than the layout itself. If the window is the width of the layout, the entire bar will be over the layout.

Due to limitations in testing locally, there could be other problems but, that should do it.

**Ready** · 05-22-2006, 10:06 PM

This is over my head but what is "z-index:100;"?

Is it possible to give the bar an absolute position.....vs "centered"?

Finally, is it possible to make it go thru this before any of the actual page is displayed? I tested this while downloading other things again and it loads the page in pieces and at about halfway thru it shows this progress bar. Do I have to make an intro page that just has this and somehow go to the main page? (I thought if this was in the head it would run before the body would load?)

Originally Posted by jscheuer1

Code:

var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute;z-index:100; visibility:hidden; background-color:'+bordercolor+'">';

What is different about my page that the original script hides the bar behind my page? (again over my head but I want to try to know why (and how) so I don't do it in the future)

Originally Posted by jscheuer1

The second problem is a conflict with your animate script. I think this is only a problem in FF but, should be resolved. Remove this from the script:

Code:

window.onload=loadimages;

Add it to your body tag like so:

Code:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#800080"   topmargin="0" onload="dynAnimation();loadimages();">

And one more time.......THANKS for your time!

**jscheuer1** · 05-23-2006, 06:05 AM

The z-index style property sets the overlay positioning (stacking order) of items on a page that are absolutely or relatively positioned in reference to each other. The default value is 0 and when not set otherwise, this means that, if their positions overlap at all, whatever comes later covers anything that came before. Higher z-index values will cover lower ones regardless of the order in which they appear in your code.

Your page must use this type of positioning, that is why this is required, as the progress bar uses it too. The progress bar is already absolutely positioned but, in relation to the width of the window, hence centered in the window. This could be changed in the code but, since your page is already centered in FF but not in IE, I think you should resolve that difference first.

**Ready** · 05-31-2006, 06:39 PM

I went thru the pages and made them all with a 0 margin on top and left...after I read this a few weeks ago. I now have time to play with this some more and I tried this again and the bar was there in the center and it doesn't disappear. Any ideas on why?

I see the place to position it horizontally but not vertically. (var yposition=320

I did try putting in an xposition.....which didn't do anything

**jscheuer1** · 05-31-2006, 07:07 PM

Originally Posted by Ready

I see the place to position it horizontally but not vertically. (var yposition=320;)
I did try putting in an xposition.....which didn't do anything

y is generally the vertical. You either have this wrong or you typed the opposite of what you meant. I believe the script is set up to center it horizontally, that is why you see no variable for that.

I will have a look at your link and advise.

Thread: Preload script

Thread Tools

Search Thread

Preload script

Bookmarks

Bookmarks

Posting Permissions