Grid display issue

[markhatter]

Hi
My site – https://markhatter.co.uk/ uses a product grid on the homepage which works great except that when the page initially loads, it displays large images one underneath each other. After a second or so the grid correctly displays with 3 across

How can I stop this happening?

Thank
Mark

[FocuxTheme Support]

I found that’s because the page loading speed is too slow so that the HTML DOM is loaded, but the css file is still not loaded.

Maybe there are the following solutions:

1. Use a fast hosting or optimize your website with cache plugin. (Autoptimize plugin you can use)
2. I just guess another reason is there are two many audio files is waiting for load when open the page, so the loading speed is slow down. We will try to improve the player and load the audio files asynchronously, but now I’m not 100% sure this, we will give a try.

Thanks

[markhatter]

Thanks, I will try to optimize the site

[FocuxTheme Support]

I found you host the audio file on amazon cloud, but if they are self-hosted, the loading speed is fast.
So, is there any loading limit setting on amazon cloud?

[markhatter]

Hi,

I did some testing on this page – https://tobykay.com/markh/ (this uses the download shortcode)

I only have one live product and I have disabled the audio preview (which has removed the image as well for some reason).

As you can see, the page still loads large and then reduces. As far as I can tell from the source code, it is not loading any mp3’s in the background.

I have created another test page – https://tobykay.com/markh/home-with-edd-grid/
This one is using the EDD grid instead of the shortcode and doesn’t appear to have the same issue.

I really need to use the shortcode as all my styling is based on that.

Feel free to test on this site. It’s a test server so you can create pages etc if you needed to.

Thanks

[markhatter]

Can I have an update please?

[FocuxTheme Support]

Since I know you use [downloads] shortcode for displaying the grid, I have reproduced this issue on my test site.
Please update the theme to v1.8.2 after 1 hour, I will fix it soon.

[markhatter]

Hi,

Thank you. This is almost working perfectly now 🙂

Now, the blue banner at the top re-sizes when you refresh the page (it starts short and then gets longer),
The images start as black boxes before they display. I know then need to load in the background but I don’t think that’s why. It doesnt even if you refresh once they have loaded and I have a caching plugin enabled so they should be in cache.

Also, if I make the screen small (to emulate a mobile) it loads the 3 column grid first before going to the single column

Thanks

[FocuxTheme Support]

I reproduced the blue banner issue, I will fix this issue in the next version of ThemeVan Toolkit plugin, now you can add the following custom CSS to Appearance > Customize > Additional CSS before you update ThemeVan Toolkit.

.vc_row[data-vc-stretch-content]{
   margin-left  : calc( -100vw / 2 + 100% / 2 ) !important;
   margin-right : calc( -100vw / 2 + 100% / 2 );
   width: 100vw;
   max-width: 100vw;
}

[FocuxTheme Support]

For the black background issue, I found that’s because the player wasn’t loaded, maybe you can try to remove the black background with the following CSS

.dgwork-preview{
   background: transparent;
}

[FocuxTheme Support]

Also, I will check and fix the responsive issue for the [downloads] grid in the next version soon, just estimate that the new version of DGWork will be released tomorrow.

[markhatter]

Thank you, the blue banner issue is fixed!

I have added the other css and it does work but there is a lot of delay where there is a white background and things seem to resize a bit before the page finally loads. I don’t think it’s because of the images as they are quite small.

This also happens on the singel product page, the banner at the top resizes on screen and there is a white box before the image loads.

Maybe there are scripts that are loading first preventing the initial paint of the screen to look correct?

Thanks again

[FocuxTheme Support]

I think the delay is caused by the javascript of the player loading.

[FocuxTheme Support]

Now I’m thinking to make it fast…

[Author]

Posts