It's because the second image is about half the size in bytes of the first image so is loading faster and because the second image isn't moved out of the way until both images have loaded. We can change that by editing here:
Code:
<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
Change that highlighted line to:
Code:
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:'+scrollerwidth+';top:0px">')
There's a slight chance that the second image might not load until it starts to slide in though. If that happens we can preload it. But I think it will be fine.
Bookmarks