HubSpot's newish image gallery component is pretty slick. By default, it lazy-loads your slide images. That's all well and good, but I think it's a bit TOO lazy. The slide image doesn't load until the slide is shifted into place, causing a brief moment of a blank slide with just the caption or image title.
Thankfully, HubSpot uses the Slick library for its sliders, so what we can do is change the default lazy-loading behavior. We want to change Slick's lazyLoad option from "ondemand" to "progressive", which forces Slick to load one image after the other when the page loads. With this, the slide images will likely be already loaded before the slide moves.
To do this, we use this bit of javascript+jQuery code. We just have to make sure the script loads in the footer of the page:
/* Change HS slick slider to initialize using progressive lazy load */
$(".hs_cos_gallery > div").each(function(){
var opts = $(this).get(0).slick.options;
opts.lazyLoad='progressive';
$(this).slick('unslick').slick(opts);
});The script simply loops all image galleries, grabs the Slick options for that gallery, alters the lazyLoad option, and reinitializes the gallery.
Let's hope HubSpot will add these types of options to their gallery module. In the meantime, this is a quick workaround. You can use this method to alter other Slick parameters too that isn't available on the HubSpot gallery module. Have fun!