Delay footer load

Support
#1

Hello!

I have Essential Grid on my main page. It is set up with lazy load and infinite scroll to help the loading time, however the footer loads first at the top of the page and then is quickly replaced by the grid.

How do I delay the footer to load after the grid?

Thank you! :grin:

#2

Hello There,

Thanks for writing in!

To delay the footer, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
    $(document).ready(function(){
        $('.x-colophon').css({'opacity': 0});
    });

    $(window).load(function(){
        $('.x-colophon').css({'opacity': 1});
    });
})(jQuery);

Hope this helps. Please let us know how it goes.

#3

Hello,

The code doesn’t work but it has changed the loading. Instead of loading first and then moving downward quickly as the grid loads—it now loads first, blinks off then on, moves downward as the grid loads. OR it loads, turns off and the grid loads. It varies between those two. I don’t know why there’s a discrepancy.

I cleared all my caches (in all my plugins and in my browser) before loading the site to test the code.

Also, to be completely sure, I tested again after deactivating Autoptimize, W3Total Cache, and Cloudflare. I reactivated the plugins as they did not affect anything.

#4

Hello There,

Aside from the JS code, we will add a css code so that when the page loads, it will be totally not visible. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .x-colophon {
  opacity: 0;
}

We would loved to know if this has work for you. Thank you.

#5

This works perfectly!

Thanks!!

#6

Actually nevermind, this only works for the first load after I purge the page cache. It doesn’t work for the following page loads.

Why would the cache be affecting this?

#7

Ok nevermind that too.

I ran a few tests now; purged the page cache and cleared my browser’s cache and it doesn’t work.

#8

Hi again,

I checked your site in couple of browsers and it’s working fine on my end. This would be the cache issue on your end, the content gets cached and the site gets loaded instantly that’s why it looks like the above script isn’t working. However It’s working as expected. Can you please disable your cache / optimization plugins and make sure to clear the browser’s cache entirely and check the site again.

Let us know how this goes!

#9

To clarify, if the cache/optimization plugins remain on, then this code doesn’t work for me, correct?

I actually need those on to optimize my site because out of the box, with Essential Grid and the theme, it’s slow.

I’m not familiar with java but from what I’ve read online if you move the script to the bottom of the page it’s supposed to load last since the browser reads html from top to bottom. Could I apply this code with FTP at the bottom of some file?

Thanks again!

#10

Hello There,

When I load the page on a very first time or using a private browsing mode, this is what I am seeing:

No footer is already displayed when you load the page.

And by the way, the JS is already loaded at the bottom of the page right before the closing of the </body> tag.

Hope this helps.

#11

Ok thanks for all your help!

#12

You are welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.