Question

I have a jQuery image slider on the header section of my website that displays images periodically in an automated sliding motion. Now the problem is when you load the page for the 1st time(nothing is cached), it loads all the images in the slider at once and it aligns the images one on top of the other on the webpage(one div on top of another), so you see all the images at once the moment the page loads. It doesn’t look very professional. Is there maybe a onpageload() function of sorts that can prevent all the images from showing at once or that can load them first in the background before showing them? This is especially a problem with lower internet speeds…My website: http://v4m.mobi

Thank you!

Answer 1

Give your images a style of display:none or visibility:hidden and then change their styles back to display:[block/inline/etc] or visibility:visible on $(window).load().

$(window).load(function(){
    $('#myImage1').css('visibility','visible');
    $('#myImage2').css('visibility','visible');
    //etc
});