2015-04-25 39 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