在使用jQuery.load时，在执行javascript之前确保应用CSS

Question

我正在开发一个网站，其内容部分可以通过点击导航栏中的链接动态加载。链接绑定到jQuery.load(<some HTML page>)。

加载到此内容窗口的其中一个页面出现问题。这是一个用户可以滚动浏览的照片库（称之为photos.html），它会动态加载更多照片。它的工作方式是：

<div id="scrolling_window">
    <div id="container">
        <ul id="list">
            <!-- Content loaded dynamically. -->
        </ul>

        <div id="loader">
            Page Loaded.
        </div>
    </div>
</div>

scrolling_window是固定高度（在css中定义），container保存图像并动态增长以包含图片。

在javascript中，我有一个函数可以计算滚动窗口的底部何时靠近容器的底部。如果它接近结束，它会加载更多图像。等等...

现在，如果我自己查看这个动态加载的图库的页面（即手动输入页面的URL），一切正常。但是，当我以预期的方式查看它时（通过单击链接并通过调用jQuery.load将其加载到现有页面中）然后它无法正常工作。

问题似乎是javascript中的数学基于CSS中定义的HTML容器的大小。我通过做一些测试并使用以下结果移动我的CSS代码引用来确认这一点：

• 在浏览器中显式加载photos.html时，只有在javascript文件之前加载CSS文件时才有效。
• 通过使用jQuery.load加载内容来查看页面时，scrolling_window的样式如<div id="scrolling_window" style="height:150px">
• 通过使用jQuery.load加载内容来查看页面时，如果CSS文件加载在主页index.html上，则它可以正常工作。

换句话说，似乎必须在执行javascript之前加载CSS文件......

所以，我的问题是......当将HTML页面加载到现有的<div>元素中时，是否可以以某种方式确保在执行javascript之前加载已加载页面上引用的CSS？

Answer 1

我认为您应该将div设置为最初加载为display:none;，然后在CSS之后加载JavaScript，然后您可以激活它。

将其设置为display：none，将其从公共视图中关闭但是已加载。现在加载CSS之后，它会获得所需的所有必要样式但却不可见但是只要加载了所有需要的JavaScript文件，它就会启动完整功能，但会被JavaScript函数激活。