我有一个带有行(20 行)的 HTML 表。每行都有一个国家列表框(大约 250 个国家/地区),这些国家/地区使用数据库中的单个数据集填充。
加载时间足够快,但渲染时间真的很乱。有什么方法可以加快这些列表框的渲染速度吗?
您可以只加载一次,然后将 DOM 元素复制到您需要的任何地方...
我不确定这是否会改善很多,因为它会更多地依赖用户的计算机,但我想如果它现在的速度太慢的话,值得一试。
编辑:这就是我的做法。谨慎使用,我没有测试过,这段代码很可能有很多错误,这只是为了让你了解我在说什么。
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
准备好文档,使用 jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
只有在用户选择了上一个选择框(使用 JavaScript)后,您才能尝试添加下一个选择框。
我很确定您可以重新考虑表格或流程,但是由于您没有提供足够的信息,因此我无法提出任何具体建议。例如,根据情况,您可以使用多选或一些花哨的 JavaScript 小部件。
根据您的评论进行编辑:
那么如何在没有选择的情况下为桌子服务。如果用户双击国家/地区字段,您可以使用 javascript 将文本元素更改为选择元素。一旦用户选择了国家,您就可以改回文本元素。您可以使用 Ajax(在用户选择国家后)或使用隐藏字段的提交按钮将结果提交回服务器。这样 DOM 将永远不会包含超过 1 个选择元素。
您可以使用内联 JSON 对象/数组(在脚本标签中)将国家/地区传递给 javascript。为了在用户编辑第一个元素后使事情变得更快,只需隐藏 (css: display: none;) 第一个构建选择元素并在每次用户想要编辑一行时克隆/移动它。
正如您所看到的,您可以使用这种方法采取很多路径,这完全取决于您想要优化/工作多少。