[JackParticipant]

Hi,

There is an ugly looking reload flash and bump when you click on a new page on the site here: http://jesperersgard.com

How do I remove that?

Thanks,
Jack

[ThaiModerator]

Hi Jack,

Try adding the following CSS under Customizer > Custom > CSS:

body {
    background-image: none;
    background-color: transparent;
}

Hope it helps 🙂

[JackParticipant]

Hi,

Unfortunately, that did not help. The background still reloads with a flash and a bump when navigating between pages. What gives?

Thanks
Jack

[RupokMember]

Hi Jack,

Thanks for updating. Kindly remove the Background Image Fade (ms) value from Customize > Layout and Design > Background Options – http://prntscr.com/abzptf

Hope this helps.

Cheers!

[JackParticipant]

Hi,

Close but no cigar. I’m on a Mac and it works in Firefox but not in Chrome or Safari. The reload flash looks worst in Safari. I have not been able to check any browsers on the Windows platform yet.

Hmm… What do we do?

Cheers
Jack

[RadModerator]

Hi Jack,

It’s just the image being loaded, it normally happens. But I’m not sure if we’re seeing the same thing. Would you mind providing a screen recording?

Thanks!

[JackParticipant]

OK. Pour yourself a cup of your favorite java and enjoy this big screen masterpiece!

http://www.screencast.com/t/TPGhNWZ2Kr6t

The clip contains screen recordings of Safari, Chrome and Firefox. Only Firefox renders the page navigation properly without flashes and bumps.

Tested on a MacBook Pro and an iMac with the same results.

[Paul RModerator]

Hi Jack,

Thanks for providing a video.

It is a normal behavior, the image is quite big and it take a little time for it to load.

You can check the link below on how to improve your site performance.

https://community.theme.co/kb/performance/

Hope that helps.

[JackParticipant]

I have set the BG image to 1920px wide to cover for high-res screens and retina screens. The weight is 660 KB. Yes, it’s large but with today’s high speed connections it’s not a big deal to have one big image load upfront, I can live with that. But after the BG is loaded it shouldn’t visibly reload every time I click on a different page. There shouldn’t be a flash and a bump. It should be smooth.

I have followed your advice to install W3. I deliberately did not install it before because I try to avoid loading a ton of plugins on small sites. W3 is definitely needed on big sites with hundreds of pages, images and commerce tools but this site http://jesperersgard.com/ is a tiny site with only a homepage and three other pages. But I did what you suggested just to make sure all bases were covered. It didn’t change a thing. Actually it did change one thing; it made the WordPress panel slower…

Then I downscaled the BG image to 1200px wide and 200 KB. Substantially less than the first image. Still no cigar.

Finally I removed the image entirely. But even without a BG image I get the flashes and the bumps if the browser cache is empty. After having clicked through the pages a few times back and forth they disappear, though. Since this is without the BG image it tells me your code must be pretty hefty to load in and of itself even with W3 enabled.

Interestingly, I can’t change the BG color in Cornerstone. I mean, the option is there and I can select a color, but it doesn’t show on the site. Instead there seems to be two backgrounds, one default white that won’t change and behind it I can see a sliver of the black I selected in Cornerstone. Go ahead and check it out. I have left the site without BG image for now.

There you have it. The bottom line is that I want to use a BG image and it should work without flashes and bumps.

Thoughts? AJAX maybe?

Cheers,
Jack

[RupokMember]

Hi Jack,

Thanks for updating. Let me summarize the thing. There is a option to fade in the background image but you have disabled this. So what is you are getting is usual loading. Since the background is white and the image is kinda dark that’s why the flash thing is visible. So you can add body background to black and this will be less visible. You can add this to customizer CSS :

body {
  background-color: #000;
}

And then try setting the background image.

You can also try setting the background image directly with CSS :

body {
  background: rgb(0, 0, 0) url("http://yourimagelink.png") no-repeat scroll center center / cover ;
}

Change http://yourimagelink.png with your uploaded image path.

Hope this helps.

Cheers!

[JackParticipant]

Problem is that the body color doesn’t change. It doesn’t change when I set it in Cornerstone and it doesn’t change when I add your code. The background is a solid gray/white wall. Behind it I can glimpse the black color.

As for the fade. You guys asked me to disable fade and when I did, the flash became less prominent. The fade is just a cosmetic cover-up it doesn’t cure the problem which is with the coding of the page.

There are two aspects of the issue:

1. The reload flash, which in and of itself is part of the nature of web design, should not be visible in a modern high-end theme like X. It should be suppressed in all browsers for best aesthetics. Best way to accomplish that, I believe, is with AJAX. What is your take on this?

2. I set the body color to black right off the bat to minimize the contrast between the BG image and the background. But I didn’t realize until I removed the BG image that the gray/white wall was there covering the the body color and obviously enhancing the reload flashes since it’s white. What is this wall? How do we get rid of it?

Cheers!
J

[ZeshanMember]

Hi J,

The image added to the body looks like the cache of Customizer as it’s showing the background image from theme.co site. The best way to remove it is by selecting any background image under Layout and Design > Background Options > Background Image in the Customizer (see: http://prntscr.com/82xeqz), then saving the Customizer and then removing the image and saving the customizer again.

As for your concern regarding background image flash, this is a normal behaviour. Even if the background image size is 50KB, the page will always load first. That said, the image will always take a little bit of time to appear on your site. Yes, there could be ways to improve this by using Ajax or other lazy image load feature, but that will be outside the scope of support we can offer. What I can do is to consider it a feature request and pass this to our developers. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thank you!

[JackParticipant]

Thanks for the suggestion but it didn’t work. I tried it several times per your instructions. Where is this cache? Can I clear it in any other way?

When it comes to suppressing the reload flash I definitely think you should build it into the theme. I really love X. It’s great in every way and easy to work with. But I am surprised and disappointed that AJAX hasn’t been implemented. A cutting edge theme should use cutting edge code.

Cheers,
Jack

[JadeModerator]

Hi Jack,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

For the meantime, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

[JackParticipant]

This reply has been marked as private.

[Author]

Posts