google.load로 인해 내 페이지가 비어있는 이유는 무엇입니까?

103

글쎄, 이것은 이상해 보이지만 해결책을 찾을 수 없습니다.

왜이 바이올린이 http://jsfiddle.net/carlesso/PKkFf/ 에 페이지 콘텐츠를 표시하고 google.load가 발생하면 페이지가 공백이됩니까?

google.load가 즉시 완료되면 잘 작동하지만 지연되는 것은 전혀 작동하지 않습니다.

당신의 게으른 (또는 더 똑똑한) 페이지 소스는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ciao</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <h1>Test</h1>
    <div id="quicivanno">
      <p>ciao</p>
    </div>
  </body>
  <script type="text/javascript">
       setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 2000);
  </script>
</html>

javascript google-visualization google-loader

— 엔리코 칼레 소
소스

1

좋은 질문은 여기 링크입니다 : friendlybit.com/js/lazy-loading-asyncronous-javascript (즉 : 단서 아직)

— mindandmedia

나는 document.write ( 'anything')이 이전 html도 지우고 settimeout의 맥락에서 문서가 엉망이 되었습니까?

— mindandmedia

109

google.load가 document.write ()를 사용하여 페이지에 스크립트를 추가하는 것 같습니다. 페이지가로드 된 후 사용하면 html이 지워집니다.

자세한 설명 : http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

아이디어 중 하나를 사용하면로드에 대한 콜백을 사용하여 doc.write 대신 append를 사용하도록 강제 할 수 있습니다.

setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

이것은 지연된 경고 창과 함께 2 초의 대기를 보여줍니다.

— 웨이브
소스

경고 창을 표시하고 싶지 않습니다. 해결 방법이 있습니까?

— Shoib Mohammed A 2013

4

경고는 코드 스 니펫의 예일뿐입니다. 그것은 무엇이든 될 수 있습니다.

— 파도

이것은 훌륭합니다. 내가 예상대로 작동하도록 변경 한 유일한 것은 경고 함수 대신 drawChart 함수를 호출하는 것입니다.

— chiurox 2013

빈 콜백 매개 변수를 추가하는 것만으로도 문제가 해결되었습니다.

— Adam B

32

콜백을 정의하기 만하면 페이지가 지워지지 않습니다 (이전 버전의 google.load ()가 수행했지만 콜백과 함께 사용하는 경우 새 버전은 그렇지 않음). 다음은 "google.charts"lib를로드 할 때 간단한 예입니다.

if(google) {
    google.load('visualization', '1.0', {
        packages: ['corechart'],
        callback: function() {
            // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
        }
    } )
}

whitout callback ()을 수행 할 때도 여전히 빈 페이지가 표시되지만 콜백을 사용하면 해결되었습니다.

— 카타이
소스

5

참고 : 다음은 시간 지연을 피하는 데 유용합니다. 이 예제는 일반적으로 모든 스크립트 (필요한)에서 사용할 수 있지만 특히 Greasemonkey와 함께 사용되었습니다. 또한 Google 차트 API를 예로 사용하지만이 솔루션은 다른 Google API를 넘어서서 스크립트가로드 될 때까지 기다려야하는 모든 곳에서 사용할 수 있습니다.

콜백과 함께 google.load를 사용하면 Greasemonkey를 사용하여 Google 차트를 추가 할 때 문제가 해결되지 않았습니다. 프로세스 (Greasemonkey가 페이지에 삽입 됨)에서 www.google.com/jsapi 스크립트 노드가 추가됩니다. Google의 jsapi javascript에 대해이 요소를 추가하면 삽입 된 (또는 페이지) 스크립트가 google.load 명령 (추가 된 노드에로드되어야 함)을 사용할 준비가되었지만이 jsapi 스크립트는 아직로드되지 않았습니다. 시간 제한 설정은 작동했지만 시간 제한은 주입 된 / 페이지 스크립트를 사용한 Google jsapi 스크립트로드의 타이밍 경쟁에 대한 해결 방법 일뿐입니다. 스크립트가 google.load (및 google.setOnLoadCallback)를 실행하는 위치를 이동하면 타이밍 경쟁 상황에 영향을 미칠 수 있습니다. 다음은 google.load를 호출하기 전에 google 스크립트 요소가로드 될 때까지 기다리는 솔루션을 제공합니다. 다음은 예입니다.

// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup     
gscript.addEventListener("load",    
    function changeCB(params) {
        gscript.removeEventListener("load", changeCB);
        google.load("visualization", "1", {packages:["corechart"], "callback": 
            function drawChart() {
                var data;
                // set the durationChart data (not in example)
                data = new google.visualization.arrayToDataTable(durationChart);

                var options = {
                    title:"Chart Title",
                    legend: {position:"none"},
                    backgroundColor:"white",
                    colors:["white","Blue"],
                    width: window.innerWidth || document.body.clientWidth,
                    height: window.innerHeight || document.body.clientHeight,
                    vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
                    hAxis: {title: "Days Since First Instance"},
                    height: ((cnt > 5)? cnt * 50 : 300),
                    isStacked: true
                }; // options


                // put chart into your div element
                var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
                chart.draw(data, options);
            } // drawChart function
        }); //packages within google.load & google load
    } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";

— 코덱
소스

2

시간 제한을 설정할 필요가 없습니다. 다른 방법이 있습니다.

$.getScript("https://www.google.com/jsapi", function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});

설명:

 function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
 }

JSAPI 스크립트를 성공적으로로드 한 후 실행되고 google.load () 성공 후 alert ()가 실행됩니다.

— 카밀 미 에르 진 스키
소스

2

google.load(…)jQuery $(document).ready(…)래퍼 내부 를 이동하려고 할 때이 문제가 발생했습니다 . google.load(…) 준비 기능 밖으로 뒤로 이동하여 즉시 실행되도록 문제를 해결했습니다.

예를 들어 다음은 작동하지 않습니다.

$(document).ready(function() {
    google.load('visualization', '1', {packages: ['corechart']});
});

그러나 이것은 다음을 수행합니다.

google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
    // …
});

— 퀸 코멘 던트
소스