我在一个网站上工作,该网站有一个内容部分,可以通过单击导航栏中的链接动态加载。链接绑定(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?
最佳答案
我认为你应该将 div 设置为初始加载为 display:none;
然后在 CSS
然后 JavaScript
加载后,你然后可以激活它。
将其设置为显示:无,将其从公共(public) View 中关闭但已加载。现在,在 CSS 加载后,它获得了所有必要的样式,但仍然不可见,但是一旦加载了所有所需的 JavaScript 文件,它就会开始完整的功能,但会被您的 JavaScript 函数激活。
关于jquery - 使用 jQuery.load 时确保在执行 javascript 之前应用 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17009913/