控制javascript模块初始化(dropzone）

Control javascript module initialization (dropzone)

本文关键字：dropzone 初始化 javascript 模块 控制      更新时间：2023-09-26

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

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何时开始初始化组件？

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

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>

尝试在外部编写，然后手动添加需要的

<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>
相关文章：