1

我正在开发一个网站，该网站具有通过单击导航栏中的链接动态加载的内容部门。链接绑定到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？

4

1 回答 1

1

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

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

于 2013-06-09T13:25:50.963 回答