Conversation
supportI added the below script from previous forum posts to temporarily fix the issue, as this still seems to be relevant, 1+ year after being reported. This seems to only happen on Firefox and no other browser. add_action('wp_footer', function(){ ?> <script> (function($){ $(function () { setTimeout(function() { jQuery('body .smart-page-loader').fadeOut(500, function() { jQuery('body .smart-page-loader').css('opacity', 0); }); }, 1500); }); })(jQuery); </script> <?php }); The page I need help with: [ log in to see the link]
Very helpfull ! thanks it fixed the infinite loop for me ! A shame that this fix is not suggest or corrected after a +1 year.
Awesome, glad it helped. Hopefully we get a fix one day.
The posted code from (@carlosatfongo) helped our website a lot by fixing the endless loading issue in Firefox. However, there was still an annoying flashing of the website before the preloader (The problem in Firefox is, reload > flash website > preloader > website visual). To prevent this blinking and to find an even more reliable solution, I developed the following code for functions.php: add_action('wp_footer', function() { ?> <script> (function($) { // Check if it is the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Add a class to hide the website $('body').addClass('hidden-site'); // Remove the class after a fixed delay before the page is fully loaded setTimeout(function() { // Remove the class to show the page $('body').removeClass('hidden-site'); }, 500); // Change the delay time here as needed (in milliseconds) } })(jQuery); </script> <?php }); This code should be placed below the code provided by (@carlosatfongo). The success of this solution was particularly evident when used in conjunction with Dark Mode. The code couldn’t be effectively combined into a single action because the two actions need to be executed separately within wp_footer, which helps reduce timing conflicts. First, the preloader is hidden, and then the website’s visibility is controlled based on the browser type. This approach minimizes the likelihood of timing-related issues. Thanks to (@carlosatfongo) for the original code, and thanks to everyone for the support and solution finding.
Hello, I would like to apologize for my previous attempts to prevent the website from flashing before the preloader in the Firefox browser. Unfortunately, I was not able to solve the problem completely. Thank you for your understanding.
Darn, i was just about to try your new code too lol
Hello for the feedback 😉 Here is another approach that seems to be a bit more robust: add_action('wp_footer', function() { ?> <script> (function($) { // Check if it's the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Hide the website by default $('body').css('visibility', 'hidden'); // When the page is almost fully loaded, make the website visible again $(window).on('load', function() { // Set a minimal delay to ensure the page is fully loaded setTimeout(function() { // Set the visibility of the website back to "visible" $('body').css('visibility', 'visible'); }, 100); // Adjust the delay time as needed (in milliseconds) }); } })(jQuery); </script> <?php }); Adjust the delay time: Try different times to find the best setting for your website. However, please note that it can be challenging to find a perfect solution. In some cases, the preloader may not be visible at all, but this will eliminate the flickering. Thank you.
Addendum, and I apologize for the confusion. In summary the following should work: /* Browser-Specific Handling for Firefox */ add_action('wp_footer', function() { ?> <script> (function($) { // Check if it's the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Add a class to hide the website $('body').addClass('hidden-site'); // Remove the class after a fixed delay before the page is fully loaded setTimeout(function() { // Remove the class to display the page $('body').removeClass('hidden-site'); }, 500); // Change the delay time here as needed (in milliseconds) } })(jQuery); </script> <?php }); The delay time is set to 500 milliseconds by default, but can be adjusted as needed. With the previous code and this CSS it should work: /* CSS code to hide the page */ .hidden-site { visibility: hidden !important; opacity: 0 !important; } Thanks a lot! This reply was modified 2 years, 9 months ago by wegerl .
Wow this works really well! Much better than before. It hides my Off Canvas elements now properly. Wicked, thank you!
Very helpfull ! thanks it fixed the infinite loop for me ! A shame that this fix is not suggest or corrected after a +1 year.
Awesome, glad it helped. Hopefully we get a fix one day.
The posted code from (@carlosatfongo) helped our website a lot by fixing the endless loading issue in Firefox. However, there was still an annoying flashing of the website before the preloader (The problem in Firefox is, reload > flash website > preloader > website visual). To prevent this blinking and to find an even more reliable solution, I developed the following code for functions.php: add_action('wp_footer', function() { ?> <script> (function($) { // Check if it is the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Add a class to hide the website $('body').addClass('hidden-site'); // Remove the class after a fixed delay before the page is fully loaded setTimeout(function() { // Remove the class to show the page $('body').removeClass('hidden-site'); }, 500); // Change the delay time here as needed (in milliseconds) } })(jQuery); </script> <?php }); This code should be placed below the code provided by (@carlosatfongo). The success of this solution was particularly evident when used in conjunction with Dark Mode. The code couldn’t be effectively combined into a single action because the two actions need to be executed separately within wp_footer, which helps reduce timing conflicts. First, the preloader is hidden, and then the website’s visibility is controlled based on the browser type. This approach minimizes the likelihood of timing-related issues. Thanks to (@carlosatfongo) for the original code, and thanks to everyone for the support and solution finding.
Hello, I would like to apologize for my previous attempts to prevent the website from flashing before the preloader in the Firefox browser. Unfortunately, I was not able to solve the problem completely. Thank you for your understanding.
Darn, i was just about to try your new code too lol
Hello for the feedback 😉 Here is another approach that seems to be a bit more robust: add_action('wp_footer', function() { ?> <script> (function($) { // Check if it's the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Hide the website by default $('body').css('visibility', 'hidden'); // When the page is almost fully loaded, make the website visible again $(window).on('load', function() { // Set a minimal delay to ensure the page is fully loaded setTimeout(function() { // Set the visibility of the website back to "visible" $('body').css('visibility', 'visible'); }, 100); // Adjust the delay time as needed (in milliseconds) }); } })(jQuery); </script> <?php }); Adjust the delay time: Try different times to find the best setting for your website. However, please note that it can be challenging to find a perfect solution. In some cases, the preloader may not be visible at all, but this will eliminate the flickering. Thank you.
Addendum, and I apologize for the confusion. In summary the following should work: /* Browser-Specific Handling for Firefox */ add_action('wp_footer', function() { ?> <script> (function($) { // Check if it's the Firefox browser var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox) { // Add a class to hide the website $('body').addClass('hidden-site'); // Remove the class after a fixed delay before the page is fully loaded setTimeout(function() { // Remove the class to display the page $('body').removeClass('hidden-site'); }, 500); // Change the delay time here as needed (in milliseconds) } })(jQuery); </script> <?php }); The delay time is set to 500 milliseconds by default, but can be adjusted as needed. With the previous code and this CSS it should work: /* CSS code to hide the page */ .hidden-site { visibility: hidden !important; opacity: 0 !important; } Thanks a lot! This reply was modified 2 years, 9 months ago by wegerl .
Wow this works really well! Much better than before. It hides my Off Canvas elements now properly. Wicked, thank you!