2011-03-03 3 views
1

오버플로를 설정하고 너비를 고정하는 방법을 사용하여 가변 크기의 상위 div의 크기를 초과하여 확장하는 div에서 문자열을 중지하려고합니다. 페이지에 약 4400 개의 DOM 요소가 있습니다 (줄이고 일반적으로 더 많을 수는 없지만). 약 100-300 만 변경하면됩니다. 물론, FF/Webkit에서는 1 초도 안되는 문제는 아니지만 IE는 7 초 이상으로 매우 느립니다.jquery 루프를 최적화하여 너비를 설정하십시오.

나는 사전 정의 된 id 요소의 배열을 사용하여 문제의 태그를 해결함으로써 모든 dom traversing을 제거했습니다. IE에 짧은 시간 내에이 작업을 수행 할 수없는 뭔가가 있습니까?

답변

2

글쎄, 어떤 속도를 제거하지 여전히 DOM의 금속 바로 아래 인와의 시점에서, 나는 그것이에게 문제가 덜 그래서 문제를 완화 할 수있는 대안을 갔어요

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); 
} 
사용자 (어쩌면 IE9는 이런 종류의 embarrasment에서 MS를 구할 것입니다!). 나는이 문제를 극복하기위한 기술을 보여준 this blog entry by Nick Fitzgerald을 보았다. 그래서 여기 Nick의 패턴을 사용하여 결국에는 내 솔루션입니다. 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에서 작동하는지 확인하십시오.

+0

감사합니다. 속성이 아니라 스타일이기 때문에 약간 변경해야했습니다. 하지만 난 그냥 innerWidth (및 너비) undefined지고있다. jq (elem) .innerWidth()로 전환하면 작동하지만 아무 것도 저장하지 않습니다 (jquery docs는 id 요소 선택기가 getElementById()에 대한 직선 래퍼라는 것을 지원합니다). 나는 오버 플로우를 옮겼다 : 2 초 동안 면도 한 sylesheet에 숨겨졌지만 여전히 7 초가 좋다. – FokeyJoe

+0

파기가 있었는데 elemName.style.width = (elem.scrollWidth - 1) + 'px'; 공장. 아아, 기껏해야 몇 초 만 절약해도 여전히 7 초입니다. FF는 160ms에서 그것을 밖으로 벨트! – FokeyJoe

관련 문제