Include html files are not coming on load document first time

Include html files are not coming on load document first time

Hi,

I have 50 static html page and I separate header footer and search as a include file. and I add this include file at another pages through javascrpit include method. but when I click (like about link)the link and the link going to this page(like about page), the content of about page is shown but the include's file like header and footer not coming with page load, but when I refresh the page(about page)the header and footer is coming.

Note :

1. all the pages has transition effect's like slide, I could not use the data-ajax false,
2. I can't use any like .php/asp or anything, I have to use only .html


Please tell me any way to do this

I use this code to include files

<script type="text/javascript">
    //<![CDATA[
        $(document).ready(function() {
             $('img.retina').retina();
            
             $("#includedHead").load("include/header.html");
             $("#includedSearch").load("include/search.html");            
             $("#includedBnav").load("include/bottom-nav.html");
             $("#includedFoot").load("include/footer.html");
        });    
    //]]>                            
</script>