Hide slides until window.load has completed

donoghue_aj's Avatar

donoghue_aj

10 Sep, 2012 12:35 PM

Hi Dmitry, Many thanks for your wonderful plugin.
I am using a window.load call with the following configuration:

$(window).load(function() {
    $("#content-slider").royalSlider({
        controlNavigation: false,
        autoPlay: { enabled: false },
        deeplinking: { enabled: false, prefix: 'page-' },
        autoHeight: true,
        transitionType: 'move',
        fadeinLoadedSlide: false,
        keyboardNavEnabled: true,
        navigateByClick: false,
        slidesSpacing: 0
    });     
});

I have the Minimal theme installed and have changed the .royalSlider class in royalslider.css to:

.royalSlider {
    width: auto;
    height: auto;
    position: relative;
    direction: ltr;
}

None of my slides are the same height and this is why I am using autoHeight: true and have set width and height to auto.
Images in my slides do not have fixed sizes.

With the above configuration, all my slides are briefly visible before the window has finished loading.

Is there a way to hide all but the first slide before window loading has been completed? Or, is there are preloading image I can use/call that gets displayed until the window has finished loading?

Many thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 10 Sep, 2012 12:40 PM

    Dmitry Semenov's Avatar

    Hi,

    If I understood you right. Simple hide slider via CSS and then display it via jQuery in window.load(). But note this might cause with SEO and no-js users.

    Dmitry

  2. 2 Posted by donoghue_aj on 11 Sep, 2012 03:43 AM

    donoghue_aj's Avatar

    Many thanks Dmitry. What additional jquery function would I need to add to:

    $(window).load(function() {
    
        $("#content-slider").royalSlider({
            controlNavigation: false,
            autoPlay: { enabled: false },
            deeplinking: { enabled: false, prefix: 'page-' },
            autoHeight: true,
            transitionType: 'move',
            fadeinLoadedSlide: false,
            keyboardNavEnabled: true,
            navigateByClick: false,
            slidesSpacing: 0
        });     
    
    });
    

    to show my #content-slider after the window has finished loading?

    I've added:

     #content-slider { display:none; }
    

    to my stylesheet.

    Thanks again

  3. Support Staff 3 Posted by Dmitry Semenov on 11 Sep, 2012 07:38 AM

    Dmitry Semenov's Avatar

    You need:

     $(window).load(function() {
        $("#content-slider").css('display', 'block').royalSlider({
            controlNavigation: false,
            autoPlay: { enabled: false },
            deeplinking: { enabled: false, prefix: 'page-' },
            autoHeight: true,
            transitionType: 'move',
            fadeinLoadedSlide: false,
            keyboardNavEnabled: true,
            navigateByClick: false,
            slidesSpacing: 0
        });     
    
    });
    
  4. 4 Posted by donoghue_aj on 11 Sep, 2012 12:20 PM

    donoghue_aj's Avatar

    Many thanks for rewriting my code. Best wishes.

  5. Support Staff 5 Posted by Dmitry Semenov on 12 Sep, 2012 05:37 AM

    Dmitry Semenov's Avatar

    No problem. Please don't forget to rate the plugin on CodeCanyon downloads page, if you haven't before.

    Dmitry

  6. Dmitry Semenov closed this discussion on 12 Sep, 2012 05:37 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac