CSS 最初不加载，刷新时不加载(F5 或 CTRL F5)，但在链接单击时加载(偶尔)

Question

花了大约一整天的时间试图解决这个问题，希望有人能帮助我!我是新来的，所以如果这是一个重复的问题，我深表歉意(我做了我的研究，但无法提前找到任何东西)。

我正在为我的咨询公司构建的网站使用浏览器缓存，但如果缓存被清除，它就无法在我的背景/ slider 图像中正确加载 CSS。浏览器(Chrome 和 Edge)并没有正确执行 CSS，而是将它们堆叠在一起显示，同时将主体的其余部分向下推得更远。

我确实对某些导航脚本等使用服务器解析。出于某种原因，CSS 不会在刷新或硬刷新时加载，但如果单击 index.html 链接(在 Logo 、导航栏上)，则会加载， ETC)。

没有什么可隐藏的，因此您可以在以下位置查看该站点:http://www.okanaganmarketing.com

下面还有网站的 slider 代码:

    <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>

如果有人能帮助我，我将不胜感激，因为我的想法已经用完了!预先感谢您的帮助!!

Answer 1

对于遇到相同问题的任何人，希望这对您有所帮助。我设法自己解决了这个问题，并不完全确定哪一部分最终解决了问题，但现在已经解决了。

我使用 .shtml 文档的服务器解析，将我的脚本包含在我的页脚中(这样我就不必在整个网站上编辑它们)并且当我单独查看我的 javascript 和 JQuery 脚本时注意到我正在运行它们具有 ASYNC 属性，出于某种原因，当在已解析的文件中时，这似乎是导致问题的原因。一旦我从与 slider 相关的 JQuery 文件中删除了 ASYNC 属性，它就会像按钮一样流畅地运行!

如果有人遇到这个问题，希望这会有所帮助!