Preload script

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

Looking at your layout, I'd change this line in the progressbar.js script:

Code:

var ww=(IE4)? document.body.clientWidth : window.innerWidth;

to:

Code:

var ww=1000;

That is the width of your layout and will be used instead of the window width to later center the bar.

**Ready** · 05-31-2006, 07:48 PM

I probably mixed up hor & vert. Is there a way to make it appear at a certain pixel? The center section of the page is 700pi and I made the bar @ 680, so can I put it @ X=160?

I noticed a few other things too.....

In I.E. the bar shows up and then stays there. In FF bar comes and goes but my side bars with the 71 & signature are not there. (that is really odd..I've never had that happen before) I changed the link above to my main page not the test page. Ok....now the bar is gone. I'm not sure WHAT I did for that.

updated link

**jscheuer1** · 05-31-2006, 08:19 PM

To sort this all out, I would need to see your demo page, preferably live on your site. You can just name it like - test.htm and provide a link to it. Looking at your layout page, from your link in a previous post, I see the script no longer appears there.

Try my suggestion of ww=1000, you will probably like the result position wise (if not, it can be worked out) but, it will take more work and a look at what you are doing to resolve the other problem.

**Ready** · 05-31-2006, 09:41 PM

Ok...I'm lost I don't see any of it now. I have the text to call it (<script language="javascript" src="progressbr.js"> Yes it's spelled incorrectly. I did this to have the original untouched..paraniod I guess) but I don't see it doing anything now

.

the test page is 0.....http://www.andrewmckay71.com/0.html

**Ready** · 06-01-2006, 02:18 AM

Well, it now loads in FF just fine, but in I.E. it loads to near the end then stays there at 98%

Any ideas?

I loaded this for the index page www.andrewmckay71.com/index.html

Is it possible to make the border (on the bar) 2 or 3 pixels instead of 1?

EDIT: I noticed on the page for this script when I looked at it in I.E. it doesn't even start. I see the bar, but it doesn't move. Is this a problem with my browswer?

**Ready** · 06-01-2006, 03:19 AM

I think it's fixed Thanks jscheuer1!!!. If you know how I can change the border on the bar please let me know.

**jscheuer1** · 06-01-2006, 04:52 AM

Looks pretty good! One thing I notice is that if you resize the page, the empty bar reappears. That is because of this line in the external script which is no longer needed:

Code:

window.onresize=setouterpos;

remove it. The border is fairly easy. The current border is really no border at all but an effect due to two different ways of displaying the bar's container and the bar itself. To increase the border, put this stylesheet before the script call on the page:

Code:

<style type="text/css">
#perouter {
border:1px solid red;
}
</style>
<script language="javascript" src="progressbr.js">
 . . .

Adjust the 1px to whatever you like, this value will be added to the existing 1px 'fake' border so, with the above, you get a 2px total border.

One other thing that I notice is that since the bar is no longer dependant upon page width, there is no reason to wait until the page is loaded to start loading the images. This means that, if you like, you can remove this from your body tag:

Code:

loadimages();

Making it:

HTML Code:

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

And add it to the end of the external script:

Code:

 . . .
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
loadimages();

**Ready** · 06-01-2006, 06:38 AM

Hey, how hard is an if function to see if they've already been cached? I glanced at this and went around to the different pages since they don't hve to load and they are already there instantly.....but if I click on home again, it reloads. I did put it in the banner so the text updating content is not covered. It's just annoying if it has already done it. Shouldn't it be almost instant if they have already loaded? (or does it manually force them to load all over again?)

I tinkered with the numbers and made the width a hair less and it appears to be centered now with the wider border and pseudo border.

is this 2 layers ....."perdone" over the "perouter"?

guess i need to learn some java now!

**jscheuer1** · 06-01-2006, 05:28 PM

Javascript really has no way to check the actual physical cache of images. It can only test if a given image object is cached. Other than images that are listed as the src attribute of an image tag, the only other type of javascript image object is the new Image() object. Each time you create one of these, it has to be loaded to be tested.

You can create a session cookie that will tell the browser if it has already done this or not and to skip it if it has. If a user has cookies disabled, they will get the loadbar each time. If the user clears their cookies while viewing the site they may (depending upon how the browser handles session cookies when its clear cookies button is pressed, some retain session cookies) have the loadbar again but, in most cases, only one extra time, as long as they don't clear cookies again.

If the user clears their cache but not their cookies, the images will no longer be preloaded. This is not something people usually do but, on occasion, it will happen.

To set this up, add this fairly good cookie unit from quirksmode.org and this variable declaration to the external script, just after the //DO NOT EDIT BEYOND THIS POINT line:

Code:

//DO NOT EDIT BEYOND THIS POINT 

function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name)
{
	createCookie(name,"",-1);
}

var needed=readCookie('loaded')=='yes'? 0 : 1

Then before the document.write line, add this test (addition red):

Code:

if(needed)
document.write(txt);

And add this test at the beginning of the function loadimages():

Code:

function loadimages(){
if(!needed)
return;
if(NS4){

Finally, add this command to the function hideperouter():

Code:

function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
createCookie('loaded','yes')
}

That's it, when all instances of the browser are closed, the cookie will be cleared but, as long as the session continues, preloading will not be repeated except under the circumstances mentioned at the top of this post.

Thread: Preload script

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions