Styleswitcher IE6 Flash of CSS

I’ve implemented a styleswitcher on a site (function not yet live) using the exact same code and method used on http://disabilityaction.org/

Viewing this site in IE6 you will notice on load it picks up the high contrast css (black background) flashing it momentarily. As my homepage is greater in page weight this flash lasts 2-3 seconds.

Does anyone know what’s causing this and any hacks to stop IE6 from doing this? Thanks!

Hi,

I didn’t notice any lag on my IE6 on that page.

IE6 is always a bit slower (especially if you have things like the pngfix in place).

Imported css files are slower also so make sure they are linked from the head instead of import.

It might just be the way that IE6 handles this.

Thanks for checking Paul. Unfortunately IE6 is the main browser in my place of work tho an upgrade to IE7 (not 8!) is being rolled out soon. It’s for a high profile so would prefer if it didn’t happen but have a look at nidirect.gov.uk to see what you think.

Have you tried the page without the pngfix added and see if there is an improvement. I often find the pngfix slows the pages right down which is why most times I code by hand and use the alpha image loader.

Another alternative (probably too late now) would be to have not actually switched stylesheets but just to switch a class in the body instead which should provide an instant effect.

Just set up rules for the different appearances preceded by the unique class and then just swap that class in the body element.

Paul in that ALA example how does the style get written to a cookie?

With a cookie script I believe :slight_smile:

Extract from the script:


//look for a stored cookie
	this.cookie = this.read();

	//if it exists
	if(this.cookie != null)
	{
		//store cookie value to string
		this.string = this.cookie;
		
		//set new body class name
		this.body.className = this.initial + this.string;
	}
	
	//*** dev
	//document.title = '<' + this.body.className.replace(/ /g,'+') + '>   [' + this.string.replace(/ /g,'+') + ']';
	
};

//set a cookie method
switchManager.prototype.set = function(days)
{
	//format expiry date
	this.date = new Date();
	this.date.setTime(this.date.getTime() + ( days *24*60*60*1000));
	
	//store the string, replacing spaces with '#' so that leading spaces are preserved
	this.info = this.string.replace(/ /g,'#');
	
	//if the value is empty, set its expiry in the past to delete the cookie
	if(this.info == '') { this.date.setTime(0); }
	
	//create the cookie
	document.cookie = 'bodySwitcher=' + this.info
		+ '; expires=' + this.date.toGMTString() 
		+ '; path=/';
		
};


//read a cookie method
switchManager.prototype.read = function()
{
	//set null reference so we always have something to return
	this.cookie = null;
	
	//if a cookie exists
	if(document.cookie)
	{
		//if it's our cookie
		if(document.cookie.indexOf('bodySwitcher')!=-1)
		{
			//extract and store relevant information (turning '#' back into spaces)
			this.cookie = document.cookie.split('bodySwitcher=');
			this.cookie = this.cookie[1].split(';');
			this.cookie = this.cookie[0].replace(/#/g,' ');
		}
	}
	
	return this.cookie;
};



Sorry Paul, didn’t see the script link, thanks mate!