在Chrome浏览器中，组合框显示速度太慢，数据量大

Combo Box displaying too slow with large data in Chrome Browser

本文关键字：数据 速度 浏览器 Chrome 组合 显示      更新时间：2023-09-26

与其他建议使用JavaScript框架的答案不同，我想知道显示记录太慢的可能解决方案。

可能性(我的观点):

1-加载100条记录，当滚动到最后一条记录时，显示下100条记录(总共200条)，以此类推。(问题是"但如何做到这一点")。在这种情况下可以使用Ajax。

2-如果元素的任何属性可以缓冲记录，或者我们可以用JavaScript缓冲记录。

除此之外，我还是个新手。必须有一个解决办法，请建议我正确的方法。一些工作示例将会很有价值。 

document.writeln("<select>");
for(var i = 1; i < 10000; i++){
	document.writeln("<option value='" + i + "'>" + i + "</option>");
}
document.writeln("</select>");
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

 <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      
        </head>
        <body>
        <!-- you can adjust showing number of data from here -->
        <select id='slr' onfocus='this.size=5;' onblur='this.size=1;' 
                onchange='this.size=1; this.blur();' >
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        </select>
        </body>
        <script>
          $('#slr').scroll(function() {
           //Its 90 px far from reaching the bottom you can adjust its value its depend on scroller size and scrollers size is depend on how much data you are showing
            if(($(this)[0].scrollHeight-$(this).scrollTop())<=90)
            {
        //you can call you ajax function here and add value in innerhtml of select tag
        alert($(this)[0].scrollHeight);
            }
        });
        </script>
        </html>
相关文章：