Hubspot Image Slider module not loading on pageload

SOLVE
subin
Top Contributor

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

 

1 Accepted solution

Accepted Solutions
stefen
Solution
Key Advisor | Partner

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;
}
Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

5 Replies 5
stefen
Solution
Key Advisor | Partner

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;
}
Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

subin
Top Contributor

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

 

Thanks

0 Upvotes
luiscosio
Member

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:

 

https://www.inbest.me/

 

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. 

0 Upvotes
stefen
Key Advisor | Partner

@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.

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
workrails
Participant

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?

0 Upvotes