我们有一个页面布局如下所示,jQuery点击处理程序用于大量HTML元素(数千个DIV)。
布局如下:
Navbar包含至少2000多个DIV和UL,LI(用于内容导航),我们将jQuery事件处理程序绑定到每个元素:
$('.navbar-item').click(function(){
/* click handler */
});
加载需要花费很多时间,在IE上性能非常糟糕! 反正我们可以改进吗?或任何替代设计来处理这个问题?
答案 0 :(得分:2)
您也可以使用on function(http://api.jquery.com/on/)
例如:
$('div.navbar').on('click', '.navbar-item', function(){
/* click handler */
});
答案 1 :(得分:2)
你有很多提高表现的可能性
1.
您可以在用户滚动并使用Ajax时加载div
2.
使用 .on
而非 .click
动态添加侦听器
例如,您可以加载一些div
并检查滚动,使用James Padolsey中的此功能,它适用于所有浏览器
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
$(window).scroll(function() {
// when the scroll is in bottom
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
// use ajax to get more div
$.ajax({
url: "otherDivs.php", // page where you load div
data { firstDiv : '10', secondDiv : '20'}, // parameters : To load div 10 to 20
type: "POST"
})
.done(function( html ) {
$( "body" ).append( html ); // html contain div 10 to 20
});
}
});
这只是一些帮助你的方法
答案 2 :(得分:1)
减少页面上的节点数量。仅加载用户需要的内容,当用户向下滚动时延迟加载或打开导航级别(如果您有可折叠的树)。
答案 3 :(得分:0)
如果点击处理程序与更多项目相同而不是使用:
$('.navbar-item').click(function(){
/* click handler */
});
你可以做到这一点:
var functionNav = function(){
/* click handler */
}
$('.navbar-item').on("click", functionNav)
如果函数类似,您还可以参数化函数以执行更多任务。