0

I am using the window.load jquery function to preload my home page with a gif image.

Now problem is, that the page freezes/time-out after a while, since all the content has not loaded, and only the gif animation is displayed. However, when reloading the page again, the page loads and hides the preloader like it should, but I don't want users to reload the page everytime.

I use the window.load function specifically because the whole need for the preloader is to preload large images that look crap when loading otherwise (images are in a slider)...

The function: As added right above my ending tag:

<script type="text/javascript">
$(window).load(function()
{
    $("#content").css('display', 'block');
    $("#loading").hide(); //the loader is hidden once content is loaded//
});
</script>

How can I fix this loading 'time-out' issue without refreshing again?

Thank you

DextrousDave
  • 6,603
  • 35
  • 91
  • 134

1 Answers1

1

I think you should try using document.ready for this :

$(document).ready(function() {
    $("#content").css('display', 'block');
    $("#loading").hide(); //
});

EDIT:

You might try wiating for your content to load :

$('#content').load( function(){
});

Or altenrtivly bind the load to your last image in slider.

eric.itzhak
  • 15,752
  • 26
  • 89
  • 142
  • Thank you, but you see, I am specifically using the window.load function, since when using document.ready, it starts displaying the content when some of the images in the featured slider loads, so the slider, which is the main focus, looks crap when not completely loaded...Any other suggestions? – DextrousDave Dec 06 '12 at 19:18
  • You might consider using https://github.com/desandro/imagesloaded plugin, i've edited my answer with another solution – eric.itzhak Dec 06 '12 at 19:28
  • Cool. Tried it out but does not work so nice with the slider. I did this, and tried some variants of it, but still doesn't work: See A... Note: The #slider-image-container is the id of the div holding the images. The images's containers are generated by php, so I do not know how to apply an id to each individual image container, so I use the main parent element of all the images... – DextrousDave Dec 07 '12 at 07:58
  • or you can adress the last image using something like `$('#slider-image-container img:last') play around with it – eric.itzhak Dec 07 '12 at 08:12