CODEWITHSUNDEEP
javascriptjqueryhtmlcss
emf88
emf88

Reputation: 31

Jquery slider to load images when ready with placeholder

OK so I have a Jquery plugin that works great and all except it puts all of the images on top of each other until the plugin has finished loading, and then they all go into place. Is there a way to have the first image be a placeholder for the size 843 w 345 h and have it load hidden until they are all ready so my page site doesn't expand down then back up when it has loaded. thanks!

$(window).load(function(){
        $('#slide-me').carousel({
            style: 'fade',
            transitionSpeed: 'slow',
            carouselSpeed: 3500,
            arrows: true,
            buttons: false,
            buttonsTheme: 'lines',
            stopOnHover: false,
            carouselHeight: 'crop',
            carouselWidth: 'crop'
        });
    });

html

<div id="slide-me">
    <img src="/tour/images/bigslider1.jpg" />
    <img src="/tour/images/bigslider2.jpg" />
    <img src="/tour/images/bligslider3.jpg" />
    <img src="/tour/images/bligslider4.jpg" />
    <img src="/tour/images/bigslider5.jpg" />

</div>

Upvotes: 0

Views: 489

Answers (2)

emf88
emf88

Reputation: 31

I actually got the answer for this and wanted to share in case anyone wanted to see it. In my css all that was needed to do was this #slide-me img { display: none; } #slide-me img:first-child { display: block; } Which allowed the first image to be shown first and hide the rest while script loaded.

Upvotes: 0

user3901534
user3901534

Reputation:

Give it a try, worked for me:

$(function(){
   setTimeout(function(){
        $('#slide-me').carousel({
            style: 'fade',
            transitionSpeed: 'slow',
            carouselSpeed: 3500,
            arrows: true,
            buttons: false,
            buttonsTheme: 'lines',
            stopOnHover: false,
            carouselHeight: 'crop',
            carouselWidth: 'crop'
        });
},500);
    });

Upvotes: 1

Related Questions