이 같은 자바 스크립트로 너무 오래

Question

내가 가지고있는 HTML 파일을 취

function drawCharts(){ 
    var graph; var data; var options; 
    options = { title: 'Title1' }; 
    data = google.visualization.arrayToDataTable([['A','B'],['0',7.2],['2',7.2],['4',7.3],['6',6.4],['8',6.4],['10',6.3],['12',6.2],['14',6.2],['16',6],['18',6],['20',6.5],['22',7.2]]); 
    graph = new google.visualization.LineChart(document.getElementById('chart_div1')); 
    graph.draw(data, options); 
    ... 
    data = google.visualization.arrayToDataTable([['A','B'],['0',14.5],['2',14.5],['4',14.5],['6',13.2],['8',13.1],['10',12.9],['12',12.8],['14',12.7],['16',12.5],['18',12.4],['20',12.2],['22',14.5]]); 
    graph = new google.visualization.LineChart(document.getElementById('chart_div50')); 
    graph.draw(data, options); 
} 
google.setOnLoadCallback(drawCharts); 

(이 파일은 이전에 생성되었습니다.) 문제는 50 개 차트를로드 할 때, 그것의 것을 꽤 오래 걸립니다 시각. 가장 좋은 방법은 다른 사람들이 그리기를 기다리지 않고 차트를 독립적으로 그리는 것입니다. 어떻게 만들 수 있는지 묻고 싶습니다.

편집 : PhonicUK의 답변에 영감을 받아 특정 div를보고 비어있는 경우 함수를 호출하는 Element ‘in view’ plugin을 발견했습니다.

Answer 1

당신은 여기에 몇 가지 방법을 시도 할 수 있습니다 :

첫 번째는 50 개 차트, 내가 그들 모두가 동시에 표시되어 있지 있으리라 믿고있어 것입니다. 따라서 창을 트랩 할 수 있습니다. 이벤트를 스크롤하여 사용자가 스크롤 할 때를 알 수 있으며 그래프가 보이는 영역의 아래쪽에있을 때만 그래프를 만들 수 있습니다. 즉, 현재 표시되고 곧 표시 될 그래프 만 생성되고 나머지는 필요하지 않을 때까지 존재하지 않습니다.

두 번째는 그래프 서버 측을 생성하여 이미지로 전송하는 것입니다. 또한로드 타임을 절약하기 위해 위와 결합 할 수 있습니다.