JQuery.Cycle shows small images on first boot

Question

I have a problem with jQuery.cycle plugin. The first time the page loads (when imgs is not cached), it displays small imgs, such as thumbnails. You can see this (edit: sorry, old link) - just wait for the second img to appear - it's small. Reload / refresh solves it, but it is not a real solution, you know.

Does anyone know what is the solution to this problem? Many thanks

Answer 1

Use $(window).load(function() { }); , not $(document).ready(function() { });

Answer 2

Use overflow:hidden in a DIV image container

Answer 3

Same problem. Random images received 24px x 24px inline styles. Instead of setting every height and width of the image, I did it through CSS. Since my width was a fixed width, I set it, but set the height to 100%:

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

It is important to override the inline styles used by the jQuery loop.

It also seems to have solved another problem that I ran into IE8. The page would load fine, but the images seemed to load after loading CSS and jquery. This led to the box not expanding to fit the height and width of the images inside. I imagine setting the width and height, the image box was the size of a bat.

Answer 4

I had the same problem and it drove me crazy! I tried preloading the images, checking versions for everything, etc., but to no avail. The only thing that seemed to fix this was to set the width and height of each image on the page, not css.

Answer 5

I solved this by setting the width and height in the <img> . But since I use a script to generate a list of images, and they sometimes have different sizes, I used a tiny php bit to solve this problem:

 function displayimage($filename) { $imgsize = getimagesize("$filename"); echo "<img src=\"$filename\" $imgsize[3] />\n"; } 

$imgsize[3] is, for example, width="585" height="285" .

And then, to show all the jpg in the directory in the slide show:

 <div class="slideshow"> <?php foreach (glob("*.jpg") as $filename) { displayimage($filename); } ?> </div> 

Exit

 <div class="slideshow"> <img src="cat.jpg" width="575" height="256" /> <img src="dog.jpg" width="475" height="350" /> <img src="frog.jpg" width="675" height="300" /> </div> 

Answer 6

It is impossible to directly answer the question (the jQuery.cycle plugin is unknown to me), many of the answers here concern the problem of image processing after loading, and also what people come here to look for. So here is what happens:

24px appear due to erroneous logic on the browser side - return premature sizes to control the placeholder. They have other control logic for processing cached images, IE does not even launch onload for them, and therefore all the confusion arises.

More reliable than (width===0) verification, which can be found all over the Internet, if the image is uploaded, the .complete DOM property is rarely mentioned, obviously supported by all major browsers: http://www.w3schools.com/jsref/ prop_img_complete.asp

this worked for me:

 $("img") .one('load', onLoadRoutine) .each(function() { if(!this.complete) { return; //.one() will fire eventually } else { onLoadRoutine({delegateTarget:this}); //fake event object } }); 

Note the layout object of the {delegateTarget:this} event. jQuery(this).trigger('load') would be preferable, but I cannot recommend it since I did not try this at the time ...

The .complete test should solve the case of faulty 24px .one('load').each() control logic, .one('load').each() . covers cached / remote control flow separation.