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

Question

我在一个网站上工作，该网站有一个内容部分，可以通过单击导航栏中的链接动态加载。链接绑定(bind)到 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在浏览器中，它仅在 CSS 文件在 javascript 文件之前加载时才有效。
• 当通过使用 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 加载后，你然后可以激活它。

将其设置为显示:无，将其从公共(public) View 中关闭但已加载。现在，在 CSS 加载后，它获得了所有必要的样式，但仍然不可见，但是一旦加载了所有所需的 JavaScript 文件，它就会开始完整的功能，但会被您的 JavaScript 函数激活。