javascript - 确保一个 javascript 在另一个之前运行

Question

我有两个 javascript 文件。目前两者都加载到标题中

    <link rel="stylesheet" href="http://filer.jungrelations.com/beaussometumblr/js/main.js">
        <script src="http://filer.jungrelations.com/beaussometumblr/js/vendor/masonry.pkgd.min.js"></script>

main.js 对 DOM 中的顺序进行了一些操作。应用 masonry，这是一个 javascript 库，它根据元素在 DOM 中的顺序绝对定位元素。我使用 data-masonry-object-method 启动它：

data-masonry-options='{ "columnWidth": 196,  "itemSelector": "section", "gutter": 8, "transitionDuration": 0 }'

因为 masonry 关心 html 节点的顺序，所以 main.js 在 masonry.js 之前运行很重要。这就是 main.js 的样子。

$(document).ready(function() {
   $('.stamp1').remove();
});

Answer 1

我建议您在进行 DOM 操作后手动激活 main.js 中的砌体：

$(document).ready(function() {
    $('.stamp1').remove(); 


    $('#container').masonry({
       columnWidth: 196,
       itemSelector: 'section',
       gutter: 8, 
       transitionDuration: 0
    });

});

您还必须从容器中删除 data-masonry-options 属性。

Answer 2

一种选择是在您的第一个中提取第二个脚本文件：

$.getScript('second-file.js');

因此你的 main.js 看起来像：

$(document).ready(function() {
   $('.stamp1').remove();            //do whatever you need to do
   $.getScript('second-file.js');    //load the second script
});