CODEWITHSUNDEEP
jquery
DextrousDave
DextrousDave

Reputation: 6793

jQuery image slider loads all images at once

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!

Upvotes: 3

Views: 7653

Answers (3)

martinedwards
martinedwards

Reputation: 5835

Could you not simply do:

.slideshow img {
    display: none;
}

.slideshow img:first-child {
    display: block;
}

They may or may not all load in at once depending on the browser but at least only one will be visible. Plus you have the non-JavaScript fallback of the first image being visible.

If you need older browser support create some kind of "visible" class and add it to the first image element.

Upvotes: 0

HellaMad
HellaMad

Reputation: 5394

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
});

Upvotes: 6

j08691
j08691

Reputation: 208040

Preload your images or use jQuery and load your code with window.load().

$(window).load(function(){  
// runs after images are loaded  
});

Upvotes: 0

Related Questions