많은 양의 HTML 요소에 대해 jQuery 함수를 최적화하는 방법

기후 모델에서 작업하고 맵 그리드에 표시합니다. 큰 격자를 사용해야합니다 : 39x60.많은 양의 HTML 요소에 대해 jQuery 함수를 최적화하는 방법

그래서 저는 2340 <div>과 jQuery를 관리해야합니다.

$("#zoom_slider").slider({ 
     orientation: "vertical", 
     value: 1, 
     min: 1, 
     max: 10, 
     step: 1, 
     slide: function(event, ui) { 
      $('.case').css('width', function(index) { 
       return index * ui.value; 
      }); 

      $('.case').css('height', function(index) { 
       return index * ui.value; 
      }); 
     } 
    });

각 셀은이 예로서 내장되어 있습니다 : :이와 아웃/확대하기 위해 jQuery를 슬라이더를 사용하려는

<div id="c13_53" class="case line_13 col_53" style="width: 17px; height: 17px; top: 216px; left: 937px;"></div>

그러나 함수가 실행될 때 파이어 폭스가 충돌합니다.

이 문제를 해결할 방법이 있습니까?

출처

2011-08-19 Elorfin

이것은 문제가 될 수 있지만 div 배열 대신 캔버스를 사용하여지도를 표시 할 생각이 있으십니까? – gislikonrad

@ Gísli Konráð, OP가 HTML5를 사용하고 있다고 말하는 곳은 어디입니까? – Gabe

다른 옵션은 지원해야하는 브라우저에 따라 CSS 변환을 사용할 수 있습니다. –

각 색인을 어떤 색인으로 설정 하시겠습니까? 슬라이더가 어떤 방향으로 움직여도 커져서 커질 것입니다. 내 생각에 참고 값을 저장하는 것이 더 좋습니다.

//Size in pixels. 
var originalSize = 20, 
    cases = $('.case'); 

stop: function(_, ui) { 
     var size = ui.val * originalSize; 
     cases.css({width: size + 'px', height: size + 'px'}); 
    }

제이콥스의 제안에 따라 사용 중지. 적어도 충돌을 멈추는 지, 잘 모르는지에 관해서는 더 효율적입니다.

출처

2011-08-19 18:32:49 Andrew

코드에서 비효율적 인 점은 모든 slide 이벤트에 두 번씩 div을 두 번 다시 선택한다는 것입니다. $('.case')은 전체 DOM 스캔을 강제 실행합니다. 변수의 요소를 캐시하고 끊임없이 다시 스캔하는 대신 해당 변수를 재사용해야합니다.

또 다른 비효율적 인 이유는 슬라이드 할 때 여러 개의 이벤트가 발생할 가능성이 있기 때문일 수 있습니다. 귀하의 핸들러에 스로틀을 가하면 속도가 빨라질 수 있습니다.

출처

2011-08-19 18:34:33 Jacob

문서에서 '이 이벤트는 슬라이드하는 동안 마우스를 움직일 때마다 트리거됩니다.'예, 큰 문제가 있습니다. – Andrew

그건 아주 좋은 지적이야. 이벤트 외부에있는 $ case 변수에 div를 저장하는 것이 이것에 대한 좋은 최적화 일 것이다. +1 – gislikonrad

많은 양의 HTML 요소에 대해 jQuery 함수를 최적화하는 방법

답변

관련 문제