flash of unstyle content

Question

I have an following issue with cycle2, all my images display briefly when the page loads, there is possible solution http://jquery.malsup.com/cycle/faq.html but it didn't help with stop flashing so the problem seems to be different:

For Cycle the possible solution is: hide all but your first slideshow image using CSS. For example:

#slideshow img { display: none }
#slideshow img.first { display: block }

...

 <div id="slideshow">
    <img src="image1.jpg" width="200" height="200" class="first" />
    <img src="image2.jpg" width="200" height="200" />
    <img src="image3.jpg" width="200" height="200" />
 </div>

My initial question was, how to apply these css two lines to cycle2 code but after testing recommendation it didn't help so looking for solution how to prevent flashing.

Here is how cycle2 code looks like in my inc/top.inc.php file:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script src="http://example.com/js/jquery.cycle2.min.js"></script>

 <div class="fl_left logo_add">
 <div class="fl_left cycle-slideshow"
     data-cycle-slides=">a"
     data-cycle-timeout="15000"
     data-cycle-pause-on-hover="true"
     data-cycle-speed="500"
     >
     <a title="<?=$lang[1159]?>" href="<?=$h?>"><img src="<?=$im?>logo.jpg" > </a>
     <a title="<?=$lang[1159]?>" href="<?=$h?>p9.html"><img src="<?=$im?>logo.jpg" > </a>
 </div>

Below is link to files:

jquery.cycle2.min.js

top.inc.php

slideshow codes start from --LOGO ADD-- in top.inc.php

thanks, S

Answer 1

I had a similar issue. Basically what was happening to me anyway was even if I was doing what cycle told me to do which was

.slide { display: none; }
.slide:first-of-type { display: block; }

was not working. What I found was as soon as the jQuery kicked in it added the absolute positioning to the slides before it was making a duplicate of the first to be the .cycle-sentinel which then becomes a static image that gives the window its dimensions. What worked for me was

.slide { display: none; }
.slide:first-of-type { display: block; position: static !important;}

This way the first slide stays static and in place until .cycle-sentinel is created at which time that becomes first of type and its supposed to be static anyway. Hope that helps in some way.