Hubspot Image Slider module not loading on pageload

Develop, Build & Integrate CMS Development
1

Hi all

I have used Hubspot Default image slider module for my website banner. But it seems that when you refresh the page, there is a 0.5 second delay, showing the slider later than the rest of the page.

See here, and make sure to try and refresh the page:

https://goo.gl/SiJa2E

Refresh - 0.5 seconds delay slider - Fostering Talent.gif

Can anyone advice me to load the the slider with out any delay?

Thanks

2

The reason is because the slider script is waiting until all the images load before displaying them. I think a better solution would be to display the first image so that the page doesn’t have to reflow later on. Try adding this CSS to your stylesheet to fix the issue:

.hs_cos_flex-slides > li:first-child {
 display: block;
}
3

Thanks for your reply @stefen, the css works well for me

Thanks

4

Whenever the slider changes, there is a small delay until the image loads. Is there any way to preload all slider images?

You can see it in action here:

There is a small delay on the first slider (even with the CSS code provided) and subsequent slides take a bit to load as well.

5

@luiscosio it’s lazy loading the images. Unfortanately, I don’t think there is a way to override the hubspot module in that way - you’d have to make your own custom module to control it.

6

Hi,

I am experiencing the same problem and the css snipet provided as the answer is not working for me. When I go to your site now it seems you fixed it. What was the best solution you found?

7

hi guys i added images to the slide but not displpayed why? anyone can help me