Using jquery include external file in HTML page load after full page load

See more:

Javascript

jQuery

HTML5

I am using Jquery for include external header , footer file but it load after full page load . it is not good user experience so i need to load external files with the page HTML.

What I have tried:

<script>
        $(document).insertBefore(function () {
            $("#Header").load("common/ChHeader.htm");
            $("#Footer").load("common/ChFooter.htm");
        });
    </script>

<script>
        $(document).ready(function () {
            $("#Header").load("common/ChHeader.htm");
            $("#Footer").load("common/ChFooter.htm");
        });
              
    </script>

<script>
        window.onload = function () {
           
                $("#Header").load("common/ChHeader.htm");
                $("#Footer").load("common/ChFooter.htm");
     
        };
    </script>