2011-03-03 82 views
1

我试图停止使用设置溢出和固定宽度的策略扩大超过其可变大小的父div的大小的字符串。我在页面上有大约4400个DOM元素(不能减少,通常可以更多),但只需要更改大约100-300个元素。当然,在FF/Webkit中这个问题不会在一秒之内完成,但IE在7秒以上速度非常慢。优化jQuery的循环设置宽度

我已经通过使用预先确定的id元素数组来解决任何dom遍历来解决有问题的标记。有什么我失踪或一些替代技巧在较短的时间内为IE做这件事?

for (id in ids) { 
    jq("#" + ids[id] + "_name").css({"overflow": "hidden", 
     'width': jq("#" + ids[id]).innerWidth() - 1 
    }); 
} 

回答

2

嗯,被降权的DOM的金属,但仍不能消除任何速度来看,我已经走了这是减轻的问题,所以这是一个问题较少的替代用户(也许IE9会从这种尴尬中拯救MS!)。我看着this blog entry by Nick Fitzgerald显示了一种技术来克服这个问题。所以在这里,使用尼克的模式,是我的解决方案(只是处理IE的一部分,我离开了非IE版本):

yieldingEach(ids, function(namebox) { 
    var elemName = document.getElementById(namebox + '_name'); 
    if (elemName) { 
     var elem = document.getElementById(namebox); 
     elemName.style.width = (elem.scrollWidth - 4) + 'px'; 
    } 
}); 
0

这是一个非jQuery的版本...验证它工作在IE浏览器,但因为你是没有的jQuery为你做这将更快略。

for (id in ids) { 
    var elemName = document.getElementById(ids[id] + '_name'), 
     elem = document.getElementById(ids[id]); 

    elemName.setAttribute('overflow', 'hidden'); 
    elemName.setAttribute('width', elem.innerWidth - 1); 
} 
+0

谢谢。必须略微改变,因为它们不是属性而是样式。但我只是从innerWidth(和宽度)未定义。如果我切换回jq(elem).innerWidth()它可以工作,但不会保存(jquery docs支持id元素选择器是getElementById()的直接包装器)。我把溢出移到了一个已经刮掉了2秒的sylesheet,但它仍然是一个不错的7秒。 – FokeyJoe 2011-03-04 01:37:17

+0

挖了一下,发现elemName.style.width =(elem.scrollWidth - 1)+'px';作品。唉,它仍然只能节省几个毫秒,仍然是7秒。 FF在160ms带出它! – FokeyJoe 2011-03-04 01:58:57