Make sure that one javascript gets run before another

Question

I have two javascript-files. That currently both get loaded in the header

    <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 does some manipulation to the order in the DOM. Applies masonry, an javascript library that positions elements absolutely based on their order in the DOM. I initiate it using the data-masonry-object-method:

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

Because masonry cares about the order of the html-nodes, It's important that main.js is run before masonry.js. This is what main.js looks like.

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

`link rel="stylesheet"` means the browser will treat it as CSS, not as Javascript. You need them both to be ` — Spudley, Aug 28 '13 at 09:40

score 1 · Accepted Answer · answered Aug 28 '13 at 09:34

I suggest you manually activate masonry in your main.js, after you did the DOM manipulation:

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


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

});

You'll also have to remove the data-masonry-options attribute from your container.

score 0 · Answer 2 · answered Aug 28 '13 at 09:38

One option is to pull in the second script file in your first:

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

Thus your main.js looks like:

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

Make sure that one javascript gets run before another

2 Answers2