Jump to content

Unstyled content flashing - Is preloading css an option?


stevenjweir

Recommended Posts

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?

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.

  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.