javascript - $(document).ready(function() with Meteor JS templates - Stack Overflow

I have a template I've deeply integrated with Meteor. It uses a scripts.js file that runs a bunch of mands after $(document).ready and $(window).load.

I put scripts.js inside of client/patibility, and it works only if I do a hard refresh of the template. Otherwise, the template doesn't render and the functions don't execute.

Specifically, this code:

    // Append .background-image-holder <img>'s as CSS backgrounds

$('.background-image-holder').each(function() {
    var imgSrc = $(this).children('img').attr('src');
    $(this).css('background', 'url("' + imgSrc + '")');
    $(this).children('img').hide();
    $(this).css('background-position', 'initial');
});

Much appreciated if you know how I should take it from here.

I have a template I've deeply integrated with Meteor. It uses a scripts.js file that runs a bunch of mands after $(document).ready and $(window).load.

I put scripts.js inside of client/patibility, and it works only if I do a hard refresh of the template. Otherwise, the template doesn't render and the functions don't execute.

Specifically, this code:

    // Append .background-image-holder <img>'s as CSS backgrounds

$('.background-image-holder').each(function() {
    var imgSrc = $(this).children('img').attr('src');
    $(this).css('background', 'url("' + imgSrc + '")');
    $(this).children('img').hide();
    $(this).css('background-position', 'initial');
});

Much appreciated if you know how I should take it from here.

• javascript
• meteor

Share Improve this question Follow asked Aug 25, 2015 at 18:04 eddiewangeddiewang 41555 silver badges2121 bronze badges 6

• Why are you putting this script in patibility directory? – Tomasz Lenarcik Commented Aug 25, 2015 at 18:11
• where should I be putting it? – eddiewang Commented Aug 25, 2015 at 18:11
• I was told to put all external js files in the patibility dictionary. – eddiewang Commented Aug 25, 2015 at 18:12
• I think that "external" here means "3rd party" so it only reffers to code you cannot edit easily (e.g. minified libraries). – Tomasz Lenarcik Commented Aug 25, 2015 at 18:13
• what are you remendations to integrating the scripts.js file? – eddiewang Commented Aug 25, 2015 at 18:17

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

If you want a function to fire off when the DOM is loaded and all images, use this: (be forewarned, this is in ES6)

let imgCount;
let imgTally = 0;

Template.myTemplate.onRendered(function () {
  this.autorun(() => {
    if (this.subscriptionsReady()) {
      Tracker.afterFlush(() => {
        imgCount = this.$('img').length;
      });
    }
  });
});

Template.myTemplate.events({
  'load img': function (event, template) {
    if (++imgTally >= imgCount) {
      (template.view.template.imagesLoaded.bind(template))();
    }
  }
});

Then you just need to declare imagesLoaded which will get fired off when all images are done.

Template.myTemplate.imagesLoaded = function () {
  // do something
};

Place this stuff in the onRendered function of the template.

Template.<name>.onRendered(function(){
//do your jquery business here!
});

For more info check the docs