2015-04-25 78 views
-1

我想做一個使用js,jquery,nvd3等的網絡......因爲他們是很多的圖書館和腳本文件,我決定衝浪網站和尋找一種以正確的順序加載它們的方法,以免出現任何依賴性錯誤。Js,jquery和其他腳本加載,但不能工作

我發現這個代碼與大多數瀏覽器兼容,理論上應該可以工作。顯然它工作正常,因爲腳本被列爲加載在Chrome的網絡標記和控制檯沒有顯示任何東西(除了我期待的消息),但網絡並沒有做什麼預期:

 function addEvent(element, event, fn) { 
     if (element.addEventListener) { 
      element.addEventListener(event, fn, false); 
     } else if (element.attachEvent) { 
      element.attachEvent('on' + event, fn); 
     } 
    } 

    function loadScript(src, callback) 
    { 
     console.log("cargando"); 
     var s, 
      r, 
      t, 
      write; 

     write = src.split("/"); 

     // this is useless. It's just for an animation 
     //document.getElementById('loadingContent').innerHTML = 'Loading ... ' + write[(write.length - 1)] + ' ... '; 

     r = false; 
     s = document.createElement('script'); 
     s.type = 'text/javascript'; 
     s.src = src; 
     s.onload = s.onreadystatechange = function() { 
     if (!r && (!this.readyState || this.readyState == 'complete')) 
     { 
      r = true; 
      if (callback !== undefined) { 
      callback(); 
      } 
     } 
     }; 
     t = document.getElementsByTagName('script')[0]; 
     t.parentNode.insertBefore(s, t); 
    } 

    addEvent(window, 'load', function(){ loadScript(
      'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', 
      function() { 
       loadScript('https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js', 
        function() { 
         loadScript('https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js', 
         function() { 
         loadScript('/static/js/jquery-ui.min.js'), 
         function() { 
          loadScript('/static/js/chart.js'); 
         }; 


         }); 
        }); 
      }); 
    }); 

    function mensaje() { 
     console.log("LOADED"); 
    } 

    mensaje() 

我看到的最奇怪的事情之一是,最後一個功能(「mensage」)打印出控制檯日誌,儘管是最後一個!

這裏是我的html代碼(「奇怪」的東西是django標籤)。我(只要可能,我可以做這項工作,我將它們包括在加載腳本)留下的css文件,沒有理由:

 {% extends "pvpc/base.html" %} 

    {% block title %}<title>Consumo</title>{% endblock %} 

    {% load staticfiles %} 
    {% block scripts %} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" charset="utf-8"></script> 
     <link rel="stylesheet" href="{% static "css/jquery-ui.min.css" %}"> 
     <script src="{% static "js/load_plus.js" %}"></script> 

    {% endblock %} 

    {% block header %}<h1>CONSUMO</h1>{% endblock %} 

    {% block section %} 
    </head> 
    <body> 
     <form> 
     <div id="radio"> 
     <input type="radio" id="radio1" name="radio" value="1"><label for="radio1">2.0A</label> 
     <input type="radio" id="radio2" name="radio" value="2"><label for="radio2">2.0DHA</label> <!-- <input checked="checked"> --> 
     <input type="radio" id="radio3" name="radio" value="3"><label for="radio3">2.0DHS</label> 
     </div> 
    </form> 
    <p> 

     <label for="amount">Periodo horario:</label> 
     <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 
    <p id="slider"></p> 

    <label for="date">Date</label> 
    <input type="text" id="date" name="Fecha"> 

    <div id="piechart"><svg></svg></div> 
    <div id="chart"><svg></svg></div> 

    </body> 
    </html> 
    {% endblock section %} 

我真的失去了這一點,因爲我試過evrything但不容找到錯誤... 我認爲它必須是一些小事情,使一切不工作。

+0

_「但網絡沒有做到預期的事情」_不描述你的實際問題是什麼,什麼是不工作? –

+0

基本上沒什麼,如果我知道你不認爲我會修好它嗎? – XcodeX

+0

如果你不知道什麼不工作,你怎麼知道它已經壞了?例如,腳本沒有執行,或腳本中創建的對象不可訪問(即,您不能使用jQuery對象) –

回答

0

js資源可能被您的瀏覽器緩存。使用Ctrl + F5重新加載就是刷新緩存。在瀏覽器中打開您的每個js文件,並通過ctrl+F5刷新該頁面。它應該工作。

+1

如果它在初始頁面加載時不起作用爲什麼它會在重新加載?沒有意義 – charlietfl

+0

css和js資源可能被他的瀏覽器緩存。使用Ctrl + F5重新加載將刷新該重新加載中的緩存。 –

+0

好吧,如果這是你的假設,你應該解釋它的答案,它可能是一個緩存問題,雖然我懷疑這個問題比這更深, – charlietfl

1

我想你想在加載所有內容時調用mensaje函數,所以你需要在charts.js這行上調用它: loadScript('/static/js/chart.js', mensaje);(而不是原始代碼)。

而您想要在腳本末尾刪除行mensaje(),因爲它會調用mensaje並在加載所有內容之前顯示「LOADED」。

+0

爲什麼?我認爲腳本在執行時從頂部加載到底部! – XcodeX

+1

loadScript函數發送一個異步請求。它加載腳本,但是當腳本加載完成時,事先不確定。要在加載完整腳本文件之前不阻止網站,它將會打開一個新的側面過程,當完成時將調用作爲第二個參數提供的功能。這個函數可以(也可能會)在代碼的其餘部分到達後執行。 –

+0

我試着多瞭解一下它是如何工作的,而且我使用消息函數作爲最後腳本加載的回調函數。它在腳本加載之前一直顯示消息!我不抓住它... – XcodeX