【问题标题】:Js, Jquery and other scripts loaded but don´t workJs、Jquery 和其他脚本已加载但不工作
【发布时间】:2015-07-04 07:24:41
【问题描述】:

我正在尝试使用 js、jquery、nvd3 等创建一个网络......因为它们有很多库和脚本文件,所以我决定在网上冲浪并寻找一种以正确顺序加载它们的方法,所以以免出现任何依赖错误。

我发现这段代码与大多数浏览器兼容,理论上应该可以工作。显然它工作正常,因为脚本被列为加载在 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 %}

我真的迷失了,因为我尝试了所有但找不到错误... 我认为这一定是一些小事使一切都无法正常工作。

【问题讨论】:

  • “但是网络并没有达到预期的效果” 没有描述您的实际问题是什么,究竟是什么不起作用?
  • 基本上没什么,如果我知道你不认为我会修好它吗?
  • 如果你不知道什么不工作,你怎么知道它坏了?例如,是脚本没有执行,还是脚本中创建的对象不可访问(即不能使用 jQuery 对象)
  • 最后我发现了一个错字,一切又恢复了。对不起,我是一个菜鸟程序员。

标签: javascript jquery html css django


【解决方案1】:

我认为您希望在加载所有内容时调用mensaje 函数,因此您需要在charts.js 行中调用它,如下所示: loadScript('/static/js/chart.js', mensaje);(代替原代码)。

并且您想删除脚本末尾的 mensaje() 行,因为它将调用 mensaje 并在加载所有内容之前显示“已加载”。

【讨论】:

  • 为什么?我以为脚本是在执行时从上到下加载的!
  • loadScript 函数发送一个异步请求。它加载脚本,但事先不确定脚本何时完成加载。要在加载完整的脚本文件之前不阻止网站,它将打开一个新的副进程,该进程将在完成后调用作为第二个参数提供的函数。因此,该函数可以(并且可能会)在其余代码结束后执行。
  • 我试图更多地了解它是如何工作的,我使用消息函数作为最后一个脚本加载的回调。它在脚本加载之前一直显示消息!我没听懂……
【解决方案2】:

js 资源可能被你的浏览器缓存了。使用 Ctrl+F5 重新加载是刷新缓存。在浏览器中打开每个 js 文件并通过ctrl+F5 刷新该页面。它应该可以工作。

【讨论】:

  • 如果它在初始页面加载时不起作用,为什么它会在重新加载时起作用?没有意义
  • css和js资源大概是被他的浏览器缓存了。使用 Ctrl+F5 重新加载是在重新加载时刷新缓存。
  • 好吧,如果这是您的假设,您应该在答案中解释它可能是缓存问题,尽管我怀疑问题比这更深
猜你喜欢
  • 1970-01-01
  • 2010-11-03
  • 2013-05-01
  • 1970-01-01
  • 2011-12-26
  • 2016-03-10
  • 1970-01-01
  • 2013-08-12
  • 2014-03-23
相关资源
最近更新 更多