Images and Carousel sometimes not loading on initial visits

Developer Support CMS Development
1

I’ve recently developed a product page template that has now been used for 6 product pages on our website. On initial visits by some team members, I’ve received some comments that images or carousel are not loading in properly. Upon a refresh of the page, things load in properly.

I’m concerned that once customers begin visiting the pages, they will receive the same loading error and render the page useless. Can someone please take a look and let me know why something like this would be happening? We are planning on building more pages. Below are the 6 URLs for the previously mentioned product pages.

Thank you!

2

Hi @MChe,

Looks like this has something to do with the JavaScript plugin called “Flickity” that is being used for the slider.

The main photo is always there but it does not get displayed because the height of the main photo is set to zero in some ocassions, leading to this:

248×276 8.7 KB

It looks like the slider re-appears not just with a refresh but also by resizing the window, so there might be some JavaScript conflicts or bugs somewhere.

You will likely need to have a developer try to troubleshoot the code.

3

Hi @MChe,

Based on a quick review, your script is firing before the DOM elements or images are fully rendered.

You can try wrapping your script in a window load event listener to make sure all assets are ready before the carousel JS runs.

$(window).on('load', function() {
 // your carousel JS here
});

This forces the script to wait until the entire page load (including images) is complete before running.

4

@GiantFocal Thank you for this! I just implemented it and tested it out. I’m no longer seeing that issue emerge, but I will keep an eye out for it.