JQuery Cycle fails on Page Refresh

Question

In a similar issue as this one:

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.

I've taken out the ASP.NET tags since they have no apparent connection to the problem. — Tomalak, Apr 30 '10 at 16:16
Just a thought - why do you need to handle a post-back at all? Using post-backs with JavaScript 'queues' and 'cycles' is generally speaking, a nightmare. It's much easier to set up your script to work at page-load (as you've discovered) than 'factor-in' a post-back. If you are using jQuery, can you not use AJAX to handle calls to the server / db rather than a post-back? Forgive me if I'm barking up the wrong tree - just a thought. — LiverpoolsNumber9, Apr 30 '10 at 16:26
Because the entire website is dynamic, its all pretty much created on the fly including the images which are dynamically created via a user control. A lot of xslt etc. — Darknight, Apr 30 '10 at 16:35

score 3 · Answer 1 · answered Apr 30 '10 at 16:26

3

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.

answered Apr 30 '10 at 16:26

Nick Craver

623,446
136
1,297
1,155

Agreed - but worth checking this link as this still won't work cross-browser - http://stackoverflow.com/questions/896083/jquery-javascript-how-to-tell-if-the-window-load-window-onload-event-has-al – LiverpoolsNumber9 Apr 30 '10 at 16:29
@LiverpoolsNumber9 - I don't believe that's correct here, as this is in-line script, not an included file (which should block as well), how could it have finished loading if it hasn't run this in-line script block yet? – Nick Craver Apr 30 '10 at 16:38

score 1 · Answer 2 · answered Aug 17 '11 at 13:23

1

Or else you can use :

$(window).load(function(){

//blabla

});

This is working too.

answered Aug 17 '11 at 13:23

Matt Loye

1,301
2
11
14

score 0 · Accepted Answer · edited May 23 '17 at 10:32

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.

score 0 · Answer 4 · answered Aug 23 '11 at 16:03

0

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

answered Aug 23 '11 at 16:03

Karl

6,793
3
23
21

JQuery Cycle fails on Page Refresh

4 Answers4