jQuery Forum

I made the following cycle show: http://www.karinedaelman.be/fotosqladminv.php?rubriek=Ierland/

When visiting this page, the first image is initially briefly shown in the top left corner of the screen before being positioned correctly. It's as if the first image is already shown before the css for the cycle shows kicks in.

Is there any way to prevent the first image from showing in this wrong position?

css:

.cycle-slideshow { margin: 0; padding: 0; position: relative; top: 13px; width: 80% } .cycle-slideshow img { display: none; max-width: 95%; opacity: 0; filter:alpha(opacity=0); } ul#cycle-pager { list-style: none; margin: 0; padding: 0} #cycle-pager li { width: 30px; float: left; padding: 8px; margin: auto; list-style: none; display: inline } #cycle-pager a { width: 30px; padding: 3px; display: block; border: 1px solid #ccc; } #cycle-pager li.cycle-pager-active a { background: #db9b7f; } #cycle-pager li a:hover{ background: #ccc; } #cycle-pager a:focus { outline: none; } #cycle-pager img { border: none; display: block }

html for the div that contains the show:

<div id='fixed'><div id="knop"><img src="images/hide-left-icon.png" width="20" height="20" /><img src="images/hide-right-icon.png" width="20" height="20" /></div> <div id="wrap" align="center"></div> <div id="show" class="cycle-slideshow" data-cycle-loader=wait data-cycle-pager="#cycle-pager" data-cycle-pager-template = "<li><a href='#'><img src='{{src}}' width=30 height=30></a></li>" data-cycle-fx=fade data-cycle-auto-height=calc data-cycle-timeout=2000 data-cycle-center-horz=true data-cycle-center-vert=true></div> </div> <div align="center" id='thumbnails' class="thumb"><ul id="cycle-pager"></ul></div>
And here is the script that loads the images for the show and puts them in the div 'show'.
xmlDoc=loadXMLDoc(gallerij); x=xmlDoc.getElementsByTagName("filename"); var legebron = x[0].childNodes[0].nodeValue; var grootBeeld = ""; var lijst = ""; for (i=0;i<x.length;i++) { var beeldnummer = x[i].childNodes[0].nodeValue; var index = i+1; grootbeeld = "/" + rubriek + "images/large/" + beeldnummer; grootbeeld = "<img src='"+grootbeeld+"' style='display: none' />"; lijst = lijst + grootbeeld; } document.getElementById("show").innerHTML = lijst;