malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add anti flicker measures for page loads

Browse Source
This commit is contained in:
Tetrakern 2024-08-09 03:56:51 +02:00
parent c113f3e036
commit 86ebc2ad30
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DEVELOPMENT.md
View File

@ -310,7 +310,7 @@ Fictioneer customizes WordPress by using as many standard action and filter hook
| `wp_default_scripts` | `fictioneer_remove_jquery_migrate` | `wp_default_scripts` | `fictioneer_remove_jquery_migrate`
| `wp_enqueue_scripts` | `fictioneer_add_custom_scripts`, `fictioneer_customizer_queue`, `fictioneer_style_queue` | `wp_enqueue_scripts` | `fictioneer_add_custom_scripts`, `fictioneer_customizer_queue`, `fictioneer_style_queue`
| `wp_footer` | `fictioneer_render_taxonomy_submenu` | `wp_footer` | `fictioneer_render_taxonomy_submenu`
| `wp_head` | `fictioneer_output_head_seo`, `fictioneer_output_rss`, `fictioneer_output_schemas`, `fictioneer_add_fiction_css`, `fictioneer_output_head_fonts`, `fictioneer_output_head_translations`, `fictioneer_remove_mu_registration_styles`, `fictioneer_output_mu_registration_style`, `fictioneer_output_head_meta`, `fictioneer_output_head_critical_scripts` | `wp_head` | `fictioneer_output_head_seo`, `fictioneer_output_rss`, `fictioneer_output_schemas`, `fictioneer_add_fiction_css`, `fictioneer_output_head_fonts`, `fictioneer_output_head_translations`, `fictioneer_remove_mu_registration_styles`, `fictioneer_output_mu_registration_style`, `fictioneer_output_head_meta`, `fictioneer_output_head_critical_scripts`. `fictioneer_output_head_anti_flicker`
| `wp_update_nav_menu` | `fictioneer_purge_nav_menu_transients` | `wp_update_nav_menu` | `fictioneer_purge_nav_menu_transients`
<br> <br>

25
includes/functions/_setup-theme.php
View File

@ -1486,7 +1486,7 @@ add_action( 'wp_head', 'fictioneer_output_head_meta', 1 );
if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) { if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
/** /**
* Output font stylesheets <head> meta * Outputs font stylesheets in the <head>
* *
* Note: This function should be kept pluggable due to legacy reasons. * Note: This function should be kept pluggable due to legacy reasons.
* *
@ -1548,12 +1548,33 @@ add_action( 'wp_head', 'fictioneer_output_head_fonts', 5 );
add_action( 'admin_head', 'fictioneer_output_head_fonts', 5 ); add_action( 'admin_head', 'fictioneer_output_head_fonts', 5 );
add_action( 'elementor/editor/after_enqueue_scripts', 'fictioneer_output_head_fonts', 5 ); add_action( 'elementor/editor/after_enqueue_scripts', 'fictioneer_output_head_fonts', 5 );
// =============================================================================
// OUTPUT HEAD NOSCRIPT
// =============================================================================
/**
* Outputs script to prevent flickering of layout on page load
*
* @since 5.22.1
*/
function fictioneer_output_head_anti_flicker() {
// Start HTML ---> ?>
<style>body{visibility: hidden;}</style>
<noscript>
<style>body {visibility: visible !important;}</style>
</noscript>
<script>document.addEventListener('DOMContentLoaded', () => {document.body.style.visibility = "visible";});</script>
<?php // <--- End HTML
}
add_action( 'wp_head', 'fictioneer_output_head_anti_flicker' );
// ============================================================================= // =============================================================================
// OUTPUT HEAD CRITICAL SCRIPTS // OUTPUT HEAD CRITICAL SCRIPTS
// ============================================================================= // =============================================================================
/** /**
* Output critical path scripts in <head> * Outputs critical path scripts in the <head>
* *
* Critical path scripts executed in the <head> before the rest of the DOM * Critical path scripts executed in the <head> before the rest of the DOM
* is loaded. This is necessary for the light/dark switch and site settings * is loaded. This is necessary for the light/dark switch and site settings