JQuery Cycle fails on Page Refresh

In a similar issue as this one:

Jquery Cycle + Firefox Squishing Images

I've managed to overcome the initial problem using Jeffs answer in the above link.

However now I have noticed a new bug, upon page refresh it simply does not work. I have tried a hard refresh (ctrl+F5) but this does not work.

However when you come page to the page it loads fine.

here is my modified version (taken from Jeff's):

<script type="text/javascript">
$(document).ready(function() 
{
var imagesRemaining = $('#slideshow img').length;
$('#slideshow img').bind('load', function(e) 
    {
        imagesRemaining = imagesRemaining - 1;
        if (imagesRemaining == 0) 
            {
                $('#slideshow').show();
                $('#slideshow').cycle({
                    fx: 'shuffle',
                    speed: 1200
                });
            }
    });
});
</script>

Any ideas? I've also tried JQuery Live but could not implement it correctly. I've also tried Meta tags to force images to load.开发者_开发技巧 But it only works first time round.

Instead of this:

$(document).ready(function() { });

Use this:

$(window).load(function() { });

In this case you want your images to load. From your question it sounds like it only works when the images are ready, e.g. instantly loaded from cache. This will wait until images are loaded before executing.

Or else you can use :

$(window).load(function(){

//blabla

});

This is working too.

Finally Solved:

Many thanks for all the suggestions,

The link provided by 'LiverpoolsNUmber9' proved to be fruitful:

How to tell whether the $(window).load()/window.onload event has already fired?

I used Stews Javascript thus:

<script type="text/javascript">
    $.windowLoaded(function() {
        DoCycle();
    });

function DoCycle() {
    $('#slideshow').show();
    $('#slideshow').cycle({
        fx: 'shuffle',
        speed: 1200
    });
}
</script>

The issues seems to be that the images (which are large) was taken time to load, and the JQuery was firing when the DOM was ready. But just because the DOM had loaded did not mean the images are ready!

Just in case others have similar issues with large images.

$.windowLoaded() seems to be a JQuery plugin, as opposed to a direct part of the library, so I'd suggest using $(window).load();