Slow slider loading

  • Resolved ElectricFeet

    (@electricfeet)


    3 years, 2 months ago

    When the slider loads for the first time (specifically on fade, but I don’t know if this is important), it takes a while to render on the page. This means that the text below the slider is shown first and then it all jumps downwards after the slider images are loaded. This makes for a bit of a janky experience.

    This can be seen here: https://simplygallery.co/simply-slider-carousel-for-wordpress-site/

    On that particular page, there is text before the slider, and the text after the slider is almost below the fold, so it is not so obvious that it is jumping down — but you can clearly see it on every reload of the page.

    When the slider is the first item on the page, it looks really bad that the text below the slider is visible for a second and then it all moves down.

    I’d really like to move away from my current slider and use this slider exclusively (I’m currently only using the lightbox), but this issue means I can’t.

    Is there any way to fix this? Maybe with preloading of some component? Or maybe with CSS, by pre-allocating the space or applying the first slide as a background? (Clutching at straws, as I don’t know javascript, so can’t go in and explore/fix.)

    Any help to get around this would be really appreciated.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author GalleryCreator

    (@gallerycreator)

    I will try what to do to improve this moment.

    Thread Starter ElectricFeet

    (@electricfeet)

    Hi @gallerycreator . I see that you fixed this on your page. Is that because you fixed the plugin and we can expect to see it in the next release? Or did you manage to fix it another way? If the latter case could you share how you did it? (If it’s in the next release, I’m happy to wait.)

    Thanks again for a great plugin.

    Plugin Author GalleryCreator

    (@gallerycreator)

    Hello, @electricfeet ,
    the next release of the plugin should help

    Thread Starter ElectricFeet

    (@electricfeet)

    @gallerycreator Great. Thanks! :)))

    Plugin Author GalleryCreator

    (@gallerycreator)

    @electricfeet , try 2.2.6
    this version should improve the situation a little

    Thread Starter ElectricFeet

    (@electricfeet)

    Hi @gallerycreator Yes, it seems faster. Many thanks! However, I still get the text appearing and then moving down when the slider loads.

    I’m sorry I cannot show it on my page because it’s a staging site. However, it did do this on https://simplygallery.co/simply-slider-carousel-for-wordpress-site/ before you fixed it.

    Did you change something else as well as speeding up the load? On simplygallery.co , it’s still slow to load, but the text no longer moves down — as if you had preallocated the space in CSS or something.

    Can you share what else you did to stop it happening on simplygallery.co ?

    UPDATE: looking at the “jumping” text on my site, the jump is now only the distance of the slider “dots”, but again, your site doesn’t do this…

    • This reply was modified 3 years, 1 month ago by ElectricFeet.
    Plugin Author GalleryCreator

    (@gallerycreator)

    Hello,
    unfortunately, I can’t help anything else, I don’t have any secrets or additional solutions.

    Thread Starter ElectricFeet

    (@electricfeet)

    OK, thanks anyway.

    Thread Starter ElectricFeet

    (@electricfeet)

    Just for info, in case it helps someone else:

    Because I know the exact ratio of all my slider images, I was able to add the following CSS:

    .pgc-sgb-cb.wp-block-pgcsimplygalleryblock-slider {
     height: calc( (100vw / 2.34) + 22px); 
}

    which pre-reserves the space needed for my slider images + dots, before the rest of the page’s contents.

    If anyone else wants to do something similar:

    • My images are 1170×500 (for historical reasons) so the ratio of width to height comes out at 2.34, hence the number in the calc formula above. This will need to be modified to match your images’ aspect ratio.
    • The additional 22px are a fudge-factor that works with my set up (I have some CSS on the dots, for example, that probably changes this figure for me). You will need to experiment to find the right figure for your setup.
    • This works on desktop; I haven’t yet done the math for tablet / phone (but this might depend on your theme, anyway, so probably isn’t generalisable).

    This combination works for me to ensure that the content below the slider doesn’t move up/down after the slider is loaded.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Slow slider loading’ is closed to new replies.