JQuery loop error on page refresh
In the same question as this one:
Jquery Cycle + Firefox Squishing Images
I was able to overcome the original problem using Jeffs answer in the link above.
However, now I noticed a new error, when refreshing the page, it just doesn't work. I tried hard update (ctrl + F5) but it doesn't work.
However, when you visit a page on a page, it loads fine.
here is my modified version (taken from Jeff):
<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 have also tried JQuery Live but was unable to implement it correctly. I've also tried meta tags to get the images to load. But it only works the first time.
a source to share
Finally solved:
Thanks a lot for all the suggestions,
The link provided by "LiverpoolsNUmber9" turned out to be fruitful:
How do I know if the $ (window) .load () / window.onload event has already been fired?
I used Stews Javascript this way:
<script type="text/javascript">
$.windowLoaded(function() {
DoCycle();
});
function DoCycle() {
$('#slideshow').show();
$('#slideshow').cycle({
fx: 'shuffle',
speed: 1200
});
}
</script>
The problem is the images (large) were loaded and the jQuery started when the DOM was ready. But just because the DOM loaded didn't mean the images were ready!
Others have similar problems with large images just in case.
a source to share
Instead of this:
$(document).ready(function() { });
Use this:
$(window).load(function() { });
In this case, you want your images to load. From your question it seems that it only works when the images are ready, eg. loaded instantly from cache. This will wait for the images to load before proceeding.
a source to share