Front page previews flash when loading

I’ve figured out a temporary fix. It involves editing the Javascript included with the theme and adding some custom CSS, so I recommend that anyone who wants to use this fix BACK UP THEIR THEME FILES before attempting it. An official fix should be implemented by the developer and released as a theme update.

The easiest way to perform this fix would be to use FTP, but it may also be possible without it. I recommend making a child theme to implement all custom CSS (not just the CSS for this fix, all custom CSS), but if you already use a plugin or the WordPress customizer for your CSS, it’s more important that you put all custom CSS in the same place (your website will load slower if there’s multiple CSS files).

Lastly, I am not a web developer. I found this temporary fix by Googling stuff and making some good guesses.

Step 1:
Using FTP, navigate to your website’s theme folder for Hamilton. Download copies of the style.css and the global.js files, just in case something goes wrong. style.css is in the Hamilton folder, and global.js is in Hamilton–>assets–>js

Step 2:
Open the global.js file. You’re going to replace a certain block of code. In the “Masonry blocks” section, find the following code:

$container.imagesLoaded().done( function(){
		masonryInit();
		fadeInSpotted();
		$container.animate({ opacity: 1.0 }, 500 );
	});

and replace it with this:

$container.imagesLoaded().done( function(){
		masonryInit();
		fadeInSpotted();
		$container.addClass('masonry');
	});

After you have replaced this code, save the file.

Step 3:

Add this custom CSS using whatever method best suits your needs:

div#posts.posts {
	opacity: 0;
	transition: opacity 1000ms;
}
div#posts.posts.masonry {
	opacity: 1;
}

That’s all. Your front page/archive pages should no longer flash while loading. If you’d like your post previews to load in slower or faster, you can adjust the “transition: opacity” number as needed.

Peace

Edit: words, formatting

• This reply was modified 6 years, 2 months ago by carbybarby838.

Correction, yes, you should definitely be able to do this without an FTP client. Simply open the WordPress editor. (Seriously though, back up your files first.)