javascript - 非常大的html页面: Need pointers on implementing a virtual scrolling

标签 javascript asp.net html performance internet-explorer-8

首先,对不起我的英语。

我有一个在 asp.net 中创建的非常大的 html 页面。我们被 IE8 困住了,不幸的是,IE8 在处理如此大的 html 页面方面非常糟糕。例如,当页面完全生成时,如果我单击一个显示 JavaScript 警报的简单按钮,则需要很长时间才能显示警报。我用firefox测试了同一页面,它运行得很好,所以问题确实出在IE8上。再次强调,使用其他浏览器不是一个选项:(

基本上,信息通过 3 个嵌套 ListView 显示,这些 ListView 生成 UL 和 LI 来模拟树。我的客户不希望有一个带有寻呼机的 GridView ;他希望能够滚动页面。

因此,处理大页面的唯一方法是当这些元素超出视口(viewport)并且我需要一些指针时从 DOM 中删除这些元素。你们如何为页面实现这样一个“虚拟”滚动条?如果有帮助的话,我们正在使用 Jquery。

这是我的想法:

在页面滚动时,我可以轻松检测到某个元素超出了视口(viewport)并且可以从 DOM 中删除。我应该在哪里保存该元素的innerhtml?在 JavaScript 变量中?

然后,假设我通过执行类似 container.getElementById.innerHTML = '' 的操作从 DOM 中删除一个元素,当然,容器的高度会减小,这可能会导致其他问题,例如滚动条将会扩大。如何保留元素容器的内容,但保持容器的高度?

此外,如果我在向下滚动页面时设法删除一个元素,那么如果我向上滚动页面,如何检测应该显示该元素?

预先感谢您的帮助!

更新:我意识到我一开始就不清楚。如果我实现一个向页面添加项目的虚拟滚动器,一段时间后页面仍然会变得太大。不仅仅是动态添加项目,真正的问题是从 DOM 中删除未在屏幕上显示的项目,并在应该显示时将它们添加回来。

最佳答案

我认为您正在寻找的术语是“无限滚动”:

https://www.google.com/search?btnG=1&pws=0&q=jquery+infinite+scroll

关于javascript - 非常大的html页面: Need pointers on implementing a virtual scrolling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9934763/

相关文章:

html - 为安全起见对 HTML 输入进行编码时,如何避免对 Ñ 或 ñ 等国际字符进行编码?

html - 设置 flex 值以使标签在容器宽度较小时正确显示?

html - 我不希望导航栏超过超大屏幕

javascript - 如何按日期升序对对象进行排序?

javascript - 样式组件中的 CSS calc()

c# - 将 bool 映射到 LINQ to SQL 数据源中的 'Y'/'N' 字段

asp.net - 查看是什么控件发起了AJAX请求

javascript - 更改JW播放器源

javascript - 幻灯片 javascript 不工作

asp.net ajax 日历扩展器(在 updatepanel 中)导致换行