I am having a problem with some of my images not loading when using
Mike Alsup's Cycle plugin. When my page loads and the images begin to
cycle, some of them just show as a small white rectangle (presumable
the border used for the images) while other images look fine. It's
acting as though the images are not getting cached in the browser
before Cycle does its thing.
To recreate the problem, I clear my cache and refresh the page. The
first image shows fine, but then when the images start to cycle, all
subsequent images just show as a small white box. Then when I refresh
the page, the images typically appear just fine. I have had some
instances where some, but not all, of the images show.
I am seeing this problem as described above in both Firefox 3 and
Safari 3. In Opera 9.6, I see the subsequent images, but they are
displayed only about 20px tall. In IE7, everything seems to work
fine.
I am using the minified version of jQuery 1.2.6 and the full version
of Cycle 2.30.
Javascript:
$(document).ready(function() {
$('.pics').cycle({
fx: 'zoom',
random: 1,
pause: 1,
delay: -1000,
timeout: 6000,
next: '.pics'
});
});
HTML:
<div class="pics">
<img src="images/photos/1.jpg" width="185" height="277" />
<img src="images/photos/2.jpg" width="185" height="277" />
<img src="images/photos/3.jpg" width="185" height="261" />
<img src="images/photos/4.jpg" width="185" height="276" />
<img src="images/photos/5.jpg" width="185" height="277" />
<img src="images/photos/6.jpg" width="185" height="277" />
<img src="images/photos/7.jpg" width="185" height="280" />
<img src="images/photos/8.jpg" width="185" height="276" />
<img src="images/photos/9.jpg" width="185" height="246" />
<img src="images/photos/10.jpg" width="185" height="276" />
<img src="images/photos/11.jpg" width="185" height="276" />
<img src="images/photos/12.jpg" width="185" height="277" />
<img src="images/photos/13.jpg" width="185" height="277" />
<img src="images/photos/14.jpg" width="185" height="276" />
<img src="images/photos/15.jpg" width="185" height="277" />
<img src="images/photos/16.jpg" width="185" height="277" />
</div>
UPDATE:
As I have been writing this message, I have been trying some other
options to see if I can resolve the issue myself. It looks like the
problem is solved by setting explicit height and width properties in
CSS. Mike, if you are out there: is this expected behavior?
