Custom Pre-loader Not Showing Instantaneously


#1

Hi

I’m trying to disable the built-in preloader and use my own GIF image. This is the CSS code I’m using:-

/*Preloader*/
.preloader .pre-bounce1, .preloader .pre-bounce2, #n2-ss-2-spinner {
	display: none !important; 
}
 
.preloader {
	background: transparent;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	min-height: 100vh;
	margin: 0px;
	z-index: 9999;
}

.preloader .spinner {
	background-image: url('https://thesurgenetwork.net/wp-content/uploads/Pre-loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100vw;
	height: 50vh;
	position: absolute;
	left: 50%;
	right: 50%;
	margin: 0px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

When I re-enable the built-in pre-loader the red circles show up straight away. My GIF image is only 4,185 kB so I wouldn’t have thought that’s too big to load.

Could someone shed some light on this please?

Many thanks

Will
https://thesurgenetwork.net


#2

Hello there,

I think the best possible solution for this is rebuild our own preloader.

Firstly add these snippets to your child theme’s functions. Or use a plugin that allows the same purpose like Functionality if you aren’t running a child theme.

    // Remove default preloader
    add_action('init', 'sydney_child_remove_preloader');
    function sydney_child_remove_preloader() {
      remove_action('sydney_before_site', 'sydney_preloader');
    }

    // New preloader
    function sydney_child_preloader() {
    	?>
    	<div class="preloader2">
    	    <div class="spinner">
    	    </div>
    	</div>
    	<?php
    }
    add_action('sydney_before_site', 'sydney_child_preloader');

Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .preloader2 {
        background: transparent;
        height: 100%;
        opacity: 1;
        position: fixed;
        text-align: center;
        transition: opacity 0.2s ease 0s;
        width: 100%;
        z-index: 9999;
    }
    .preloader2 .spinner {
        height: 30px;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        position: relative;
        top: 50%;
        width: 30px;
    }

    .preloader2 .spinner {
    	background-image: url('https://thesurgenetwork.net/wp-content/uploads/Pre-loader.gif');
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 100vw;
    	height: 50vh;
    	position: absolute;
    	left: 50%;
    	right: 50%;
    	margin: 0px;
    	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    }

Now, to keep neater code you might want to remove your own CSS code, which be used to restyle the .preloader.

Then do the below steps.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

       'use strict'

      var removePreloader = function() {
       setTimeout(function(){
         $('.preloader2').hide();
         $('.preloader2').css('opacity', 0);
       }, 3000);
      }

     	$(function() {
        removePreloader();
      });

    })(jQuery);

To control the delay time of preloader’s disappearing, change 3000 to any number of your choice. 3000 means 3 seconds.

  1. Update

Flush any applied cache before reloading your site. Because it usually prevents new code addition to take effect. Further reading about this:

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis


#3

Hi Kharis

All of the code above works perfectly as now my pre-loader is is the only one showing. Thank you.

The only problem I have is the the pre-loader is not loading straightaway. The header, the header contact bar, and bits of Elementor are loading beforehand. I’ve uploaded a video to YouTube to show you. In the example I have throttled the connection to Regular 4G

Delayed Preloader

Kind regards

Will


#4

Hello Will,

Try replacing this code block:

    .preloader2 {
        background: transparent;
        height: 100%;
        opacity: 1;
        position: fixed;
        text-align: center;
        transition: opacity 0.2s ease 0s;
        width: 100%;
        z-index: 9999;
    }

with:

    .preloader2 {
        background: #fff;
        height: 100%;
        opacity: 1;
        position: fixed;
        text-align: center;
        transition: opacity 0.2s ease 0s;
        width: 100%;
        z-index: 9999;
    }

Let me know how it goes.

Regards,
Kharis


#5

Thank you Kharis.

I noticed that you simply changed the background on .preloader2 to a colour so nothing underneath would show through. Asa further tweak of yours, I have now sucessfully managed to use a background image instead of colour.

Thank you for helping me out.

Many thanks

Will


#6

Great Will!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis