jQuery.Cycle showing small images at first load

Question

I've got problem with jQuery.cycle plugin. At first load of page (when imgs aren't cached) it's showing small imgs, like thumbnails. You can see it at (edit: sorry, old link) - just wait when the second img shows - it's small. Reload/refresh solves it, but it's not real solution, you know.

Does anybody know what's the solution of this problem? Thanks a lot

Answer 1

Use $(window).load(function() { }); rather than $(document).ready(function() { });

Answer 2

Use overflow:hidden on the images container DIV

Answer 3

Same issue. Random images were getting inline styles of 24px x 24px. Rather than setting each image height and width, I did so through CSS. Since my width was a fixed width, I set that but set the height to 100%:

.ParentDiv img { width: 400px !important; height: 100% !important; }

The !important is necessary to override the inline styles applied by jQuery cycle.

This also seemed to solve another issue I was having with IE8. The page would load fine, but the images seemed to be loading after all the CSS and jquery loaded. This caused the box to not expand to fit the height and width of the images within. I imagine setting the width and height, the box holding the images was sized right off the bat.