Google.load sayfamın neden boş kalmasına neden oluyor?

103

Bu garip görünüyor ama bir çözüm bulamıyorum.

Neden dünyada bu keman http://jsfiddle.net/carlesso/PKkFf/ sayfa içeriğini gösteriyor ve sonra google.load gerçekleştiğinde sayfa boş oluyor?

Google.load hemen yapılırsa iyi çalışır, ancak geciktirilmesi hiç çalışmaz.

İşte sizin tembel (veya daha akıllı) için sayfa kaynağı:

<!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

— Enrico Carlesso
kaynak

1

güzel soru, işte bir bağlantı: friendlybit.com/js/lazy-loading-asyncronous-javascript (başka bir deyişle: henüz ipucu yok)

— mindandmedia

Bu document.write ('herhangi bir şey') önceki html'yi de temizleyecektir, belki de settimeout bağlamında belge geçersizdir?

— mindandmedia

109

Görünüşe göre google.load komut dosyasını bir document.write () kullanarak sayfaya ekliyor, bu sayfa yüklendikten sonra kullanılırsa html'yi siliyor.

Bu daha derinlemesine açıklıyor: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Fikirlerden birini kullanarak, yük için doc.write yerine append kullanmaya zorlamak için bir geri arama kullanabilirsiniz:

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

Bu, gecikmeli uyarı penceresi ile 2 saniyelik beklemeyi gösterir

— dalga
kaynak

Uyarı penceresinin görüntülenmesini istemiyorum, bunu yapmak için herhangi bir çalışma var mı?

— Shoib Mohammed A

4

Uyarı yalnızca bir örnek kod parçacığıdır. Herhangi bir şey olabilir.

— dalga

Bu harika. Beklediğim gibi çalışacak şekilde değiştirdiğim tek şey, uyarı işlevi yerine drawChart işlevini çağırmaktı.

— chiurox

Sadece boş bir geri arama parametresi eklemek benim için sorunu çözdü.

— Adam B

32

Sadece bir geri arama tanımlamanız gerekir ve bu, sayfayı temizlemeyecektir (belki google.load () eski sürümleri temizledi, ancak görünüşe göre yeni olanlar geri arama ile kullanılmazsa). Burada "google.charts" kütüphanesini yüklerken basitleştirilmiş bir örnek:

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!
        }
    } )
}

Callback () olmadan yaptığımda, yine de boş sayfa alıyorum - ama geri arama ile benim için düzeltildi.

— Katai
kaynak

5

Not: Aşağıdakiler zaman gecikmesinden kaçınmak için iyidir - tam zamanında. Örnek genel olarak tüm betikler tarafından kullanılabilir (buna ihtiyaç duyar), ancak özellikle Greasemonkey ile birlikte kullanılmıştır. Aynı zamanda örnek olarak Google grafik API'sini kullanır, ancak bu çözüm diğer Google API'lerinin ötesine geçer ve bir komut dosyasının yüklenmesini beklemeniz gereken her yerde kullanılabilir.

Bir geri arama ile google.load kullanılması, bir Google grafiği eklemek için Greasemonkey kullanıldığında sorunu çözmedi. Süreçte (sayfaya Greasemonkey enjekte edildi), www.google.com/jsapi komut dosyası düğümü eklenir. Google'ın jsapi javascript'i için bu öğeyi ekledikten sonra, enjekte edilen (veya sayfa) komut dosyası google.load komutunu (eklenen düğüme yüklenmesi gereken) kullanmaya hazırdır, ancak bu jsapi betiği henüz yüklenmedi. Bir zaman aşımı ayarı işe yaradı, ancak zaman aşımı, Google jsapi komut dosyası yüklemesinin enjekte / sayfa komut dosyasıyla zamanlama yarışı için yalnızca bir geçici çözümdü. Bir komut dosyasının google.load'u (ve muhtemelen google.setOnLoadCallback) yürüttüğü yerde hareket etmek, zamanlama yarış durumunu etkileyebilir. Aşağıda, google.load çağrılmadan önce google script öğesinin yüklenmesini bekleyen bir çözüm önerilmektedir. İşte bir örnek:

// ********* 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";

— kod belgesi
kaynak

2

Zaman aşımı ayarlamanıza gerek yoktur. Başka bir yol var:

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

Açıklama:

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

JSAPI komut dosyası başarıyla yüklendikten sonra çalıştırılacak, ardından başarılı google.load () işleminden sonra alert () çalıştırılacaktır

— Kamil Mierzyński
kaynak

2

google.load(…)Bir jQuery $(document).ready(…)sarmalayıcısının içine taşımaya çalışırken bu sorunla karşılaştım . google.load(…) Arka tarafın hazır işlevinin dışına taşınması sorunu hemen çözer.

Örneğin, bu işe yaramaz:

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

Ancak bu:

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

— Quinn Comendant
kaynak