Unstyled content flashing - Is preloading css an option?

Hi there,

I'm currently running http://jquery.malsup.com/cycle/ Jquery Cycle plugin on a page on a website. On all our machines and all the machines I've been able to test the page on, the slideshow works as intended. But sod's law that the only person having issues is the client. He is using Internet Explorer and won't budge on the browser.

The issue he is having is that when he loads the page, sometimes, not everytime, two images are shown stacked ontop of each other for about a second then the fading animation begins between single images. Things I've done to combat this to hold the page off from showing until the slideshow has finished loading, doesn't work apparently, client still has issues. It's also a problem that I cannot replicate this issue either, so I'm struggling to fix something I can't see.

The next idea I have is to preload the CSS, but is that even possible? Isn't the CSS loaded first anyway?

Any ideas guys?

can you post the exact code you are using?

Yep:

The images are all in the directory /slideshow/ on the website.

Here's the Slideshow inside its DIV inside the page:

    <div class="slideshow" align="center" style="background: transparent !important;"><br />

<?php $files = glob("slideshow/*.*"); for ($i=1; $i<count($files); $i++) {  $num = $files[$i];  echo '<div class="slide"><img src="'.$num.'" alt="Slideshow"></div>'."  ";  } ?>
    </div>

Here's the CSS for that:

.slideshow { margin: 0px auto; padding: 0; height: 240px; width: 240px; display:block; }
.slide { margin: auto; text-align:center; vertical-align:middle; background: transparent !important; }
.slideshow, .slide { height: 240px; width: 240px; background: transparent !important;}
.slide img { padding: 0px; border: 0px solid #ccc; margin: auto; margin-top: auto; display: block; background: transparent !important;}

Here's the code I'm using to wait for the slideshow before loading page:

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

Here's the JQuery Cycle script: http://jquery.malsup.com/cycle/download.html

Thanks.

You can use JS to open the page in a hidden window, then all the info on that page will be in the end-users cache.

maybe start with      $('#your-element').css('display','none');

But i must admit IE sucks balls, the fade effect screws up bold text also in IE I still didn't found a fix for that too.