Reputation: 6793
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
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
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
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