Hide image until fully loaded

daniel's Avatar

daniel

15 Jul, 2016 08:56 PM

Hi
I do have the following structure:

.royalslider
    .rsOverflow
        .rsContainer
            .rsSlide
                .rsImg
The image appears before its loaded. The suggested solution in this forum doesn’t work for me:
.royalSlider > .rsContent {
visibility: hidden; 
/* or display:none depending on your needs... */
}
There is no .rsContent wrapper in my setup. Is there another way to achive the same effect with my setup.
Thanks
  1. Support Staff 1 Posted by Dmitry Semenov on 16 Jul, 2016 03:41 PM

    Dmitry Semenov's Avatar

    Hello,

    Yes, you may just use .royalSlider > .rsImg if rsImg is the root element of your slide.

    Dmitry

  2. 2 Posted by daniel on 16 Jul, 2016 06:19 PM

    daniel's Avatar

    Thanks that did the job
    I tried rsSlider before and that didn’t work, maybe because its injected by Jquery ?
    Thanks for your help.
    Daniel

  3. Support Staff 3 Posted by Dmitry Semenov on 17 Jul, 2016 08:42 AM

    Dmitry Semenov's Avatar

    The code in above guide hides the image before the JS is executed (which is why selector like .royalSlider > .rsImg works), isn't that what you're looking for?

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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