控制javascript模块初始化（dropzone）

Question

我正在尝试手动实例化一个放置区。为此，我需要先设置：

Dropzone.autoDiscover = false;

问题是我不知道在哪里做。要么我做得太早，但 Dropzone 尚未定义，要么我做得太晚，Dropzone 已经附加到所有 dropzone 元素。

目前我正在尝试：

<body onload="myOnload()">    
    ...
    <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'bower_components/dropzone/dist/dropzone.js' %}"></script>
    ...
    <script type="text/javascript">
     function myOnload() {
       Dropzone.autoDiscover = false;
       // create here my dropzones programatically
     }
    </script>
</body>

但这已经太晚了：dropzone 已经加载并初始化了没有 url 的组件（因为我没有使用表单），并且失败了。

如何控制Dropzone何时开始初始化组件？

Answer 1

尝试在外面写，然后手动添加你需要的

<script type="text/javascript">
 Dropzone.autoDiscover = false;
 function myOnload() {
   // create here my dropzones programatically
 }
</script>

这个脚本标签应该写在插件包含之前：

<script type="text/javascript">
 Dropzone.autoDiscover = false;
 function myOnload() {
   // create here my dropzones programatically
 }
</script>
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/dropzone/dist/dropzone.js' %}"></script>

Answer 2

正如我在其他人的问题评论中所解释的那样，我不是页面加载方式方面的专家，但我将尝试解释该过程，或者至少我认为该过程是如何工作的。

dropzone 库在触发 DOMContentLoaded 事件之前不会尝试附加到元素，这与 body 标签的 onload 属性有点相同，但不完全相同，我不完全确定，但我认为 onload 在触发之前等待更多的事情。

所以我相信它的发生是首先触发 DOMContentLoaded 并且 Dropzone 自动附加到 .dropzone 元素。稍后触发 onload 事件并调用你的 myOnload() 函数，因为 dropzone 已经附加了。

要解决这个问题，您必须在库后包含您设置 Dropzone.autoDiscover = false 的脚本，但不要换行。

<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/dropzone/dist/dropzone.js' %}"></script>

<script type="text/javascript">
 Dropzone.autoDiscover = false;
 function myOnload() {
   // create here my dropzones programatically
 }
</script>

控制javascript模块初始化（dropzone）

Control javascript module initialization (dropzone)

javascript

dropzone.js