Prioritise JS

[almo136]

On our home page we have a slideshow at the top of the page.

Further down the page we are using this plugin [instafeedjs.com...] to show recent images from our instagram feed.

The problem is the slideshow never loads until the instagram feed loads so we end up with a black space at the top of the page while it loads.

Is it possible to specify that we want the slideshow to load first?

Thanks!

[Fotiman]

How are you currently loading them?

[almo136]

For the instafeed it is added in to the html body like this:
[evernote.com...]

For the slideshow the JS file is called in the head of the doc and then the slideshow is called using a widget in the site theme so not sure exactly how it is loaded.

Ideally I would like to set the instafeed to only load once the rest of the page is finished loading.

[Fotiman]

Are you using jQuery? If so:

$(function () {
 var userFeed = new Instafeed({
  ...
 });
 userFeed.run();
});

This will cause that code to only run once the document is ready.

[almo136]

Thanks!

[almo136]

Just realised it isn't working as the slideshow isn't loading first. Sometimes it isn't noticeable but occasionally the instagram feed doesn't load at all and when this happens the slideshow won't display.

[Fotiman]

Is the slideshow dependant on images from the Instagram feed?

[almo136]

No. It has it's own images. The images still appear in the source code but not on the page.

I actually think it could be something to do with my browser as when I check the same page from another laptop it seems to work fine.

[Fotiman]

I'd probably need to see how you're loading the slideshow code and whether they interact with the same DOM elements anywhere.