CSS Not Loading initially, Doesn't Load on Refresh (F5 or CTRL F5), but loads on Link Click (Occasionally)

Question

Spent about a full day trying to figure this out so hoping someone can help me out! I'm new here so I apologize if this is a repeat question, (I did do my research and couldn't find anything in advance).

My website I'm building for my Consulting company utilizes browser caching, but if the cache is cleared it doesn't load the CSS properly in my background / slider images. Instead of executing the CSS properly, the browser (Chrome, & Edge) Display them stacked on top of each other, while pushing the rest of the body down farther.

I do use server parsing for for certain nav scripts etc. For some reason the CSS won't load on a refresh, or hard refresh, but will load if the index.html link is clicked (either on logo, nav bar, etc).

Nothing to hide so you can view the site at: http://www.okanaganmarketing.com

Below if the slider code for the site as well:

    <div class="slider">
                <div class="fullwidthbanner-container">
                    <div class="fullwidthbanner">
                        <ul>
                            <li class="first-slide" data-transition="fade" data-slotamount="10" data-masterspeed="300">
                                <img src="assets/images/snap_dot.jpg" data-fullwidthcentering="on" alt="slide">
                                <div class="tp-caption first-line lft tp-resizeme start" data-x="center" data-hoffset="0" data-y="250" data-speed="1000" data-start="200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">Grow Your Business</div>
                                <div class="tp-caption second-line lfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="340" data-speed="1000" data-start="800" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">We Specialize In Marketing Strategy & Implementation</div>
                                <div class="tp-caption slider-btn sfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="510" data-speed="1000" data-start="2200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0"><a href="#" class="btn btn-slider">We'll Show You How</a></div>
                            </li>
                            <li class="first-slide" data-transition="fade" data-slotamount="10" data-masterspeed="300">
                                <img src="assets/images/millenials_2_dot_grey.jpg" data-fullwidthcentering="on" alt="slide">
                                <div class="tp-caption first-line lft tp-resizeme start" data-x="center" data-hoffset="0" data-y="250" data-speed="1000" data-start="200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">Engage Your Customers</div>
                                <div class="tp-caption second-line lfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="340" data-speed="1000" data-start="800" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">Social Media Marketing & Account Managment</div>
                                <div class="tp-caption slider-btn sfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="510" data-speed="1000" data-start="2200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0"><a href="#" class=" second-btn btn btn-slider">We'll Take Care Of It For You</a></div>
                            </li>
                            <li class="first-slide" data-transition="fade" data-slotamount="10" data-masterspeed="300">
                                <img src="assets/images/sunset.jpg" data-fullwidthcentering="on" alt="slide">
                                <div class="tp-caption first-line lft tp-resizeme start" data-x="center" data-hoffset="0" data-y="250" data-speed="1000" data-start="200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">Reach The Right Customers</div>
                                <div class="tp-caption second-line lfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="340" data-speed="1000" data-start="800" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0">Marketing Communications & Media Exposure For Your Business</div>
                                <div class="tp-caption slider-btn sfb tp-resizeme start" data-x="center" data-hoffset="0" data-y="510" data-speed="1000" data-start="2200" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0" data-endelementdelay="0"><a href="#" class="btn btn-slider">We'll Help You Reach Your Goals</a></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

If someone can help me that would be greatly appreciated as I am running out of ideas! Thanks in advance for your help!!

Answer 1

For anyone who runs into the same problem hopefully this will be of some help to you. I managed to figure it out myself, and not entirely sure which part ended up fixing the problem but nonetheless it is now fixed.

I was using server parsing for .shtml docs, to include my scripts in my footer (so I didn't have to edit them all over my website) and noticed when I looked at my javascript and JQuery scripts individually I was running them with the ASYNC attribute, which for some reason, when in a parsed file seemed to be causing the problem. As soon as I removed the ASYNC attribute from the slider related JQuery Files, it ran smooth as a button!

If anyone runs into this problem hopefully this will be of some assistance!