代码之家 › 专栏 › 技术社区 › Dennis

未捕获错误:必须在传单热图插件之前加载传单

loading leaflet jquery javascript

Dennis · 技术社区 · 7 年前

我想创建一个热图使用热图和传单。但是,我一直在加载javascript文件。我的控制台中的错误显示了大约2次中的1次:

leaflet-heatmap.js:23 Uncaught Error: Leaflet must be loaded before the leaflet heatmap plugin
    at leaflet-heatmap.js:23
    at leaflet-heatmap.js:28

所以一半的时间加载正确,但另一半不正确。

我试着在不同的线程中使用不同的选项,但都没有成功。

<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
    <script type="text/javascript">
        var myScript = document.createElement('script');
        myScript.setAttribute('src', '<?=base_url()?>assets/js/plugins/heatmap.js');
        document.head.appendChild(myScript);

        myScript.onload = function() {
            var script = document.createElement('script');
            script.src = "<?=base_url()?>assets/js/plugins/leaflet-heatmap.js";
            script.async = true;
            document.head.appendChild(script);
        };
    </script>

或

<script async src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
        var script = document.createElement('script');
        script.src = "<?=base_url()?>assets/js/plugins/leaflet-heatmap.js";
        script.async = true;
        document.head.appendChild(script);
    });
</script>

或

<script async src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script async src="<?=base_url()?>assets/js/plugins/leaflet-heatmap.js"></script>

1 回复 | 直到 7 年前

Patrick Hund 7 年前

需要按特定顺序加载脚本标记。小叶需要先加载。如果你使用 异步的 属性,则无法保证它们的加载顺序。要解决您的问题,请忽略 异步的 属性:

<script src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script src="<?=base_url()?>assets/js/plugins/leaflet-heatmap.js"></script>

推荐文章