How to run a jQuery function after all and any other javascript has run

Question

I have a photo gallery page hosted on a CMS (Squarespace) which has some of it's own scripts which load the thumbnails asynchronously.

The actual large images however are not preloaded, so I decided to add my own script into the mix to just make the browser load those larger images into the cache in the background, like this:

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

$(window).load(function(){
$.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});

I placed my code in a $(window).load() because this is a background script and it's not essential it even runs at all, it's just to improve performance.

However, I think this script is somehow blocking the CMS's own thumbnail preloading script.

Am I right? And most importantly, is there a way to dictate that my script only run after all other scripts on the page have run?

cheers

Nick Craver · Accepted Answer · 2010-06-23 01:13:17Z

2

JavaScript is always running, the hover event for example is firing constantly, mousemove, etc...there's no "end" to the script run.

However in your case, this shouldn't block any other preloading...also you can use document.ready here, since you don't actually need images loaded before your code executes.

In fact, you're actually slowing down the page by using window.load instead...since the preloading starts later, when it could be parallelized with other downloads earlier by the browser. Instead use document.ready, like this:

$(function(){
  $.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});

answered Jun 23, 2010 at 1:13

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

andy Over a year ago

thanks nick. that makes sense. However, my script is somehow blocking the thumbnail preloading... I don't know how, but the effect is consistent and significant. Could it be something to do with the limits of the browser connections...?

Nick Craver Over a year ago

@andy - It could, if they're on the same domain, the actual HTTP spec says 2 connections per domain at a time, which IE in particular obeys (others allow pipelining easier). Can give the images a different URL?, for example http://static.mydomain.com/Images/...., this would allow another 'n' number of connections, because it treats it as another domain from www. for example.

andy Over a year ago

hey Nick, thanks for the extra snippet, I actually tried ready() first, but was getting the block, so then I though window.load() would help, but of course the thumbnails are being loaded async those that wouldn't make a difference... right? maybe I'm completely wrong, I'm assuming it's a block because the thumbnails only load after all my images have loaded in the background

andy Over a year ago

@nick: ahh... ok, yeah, they are all the same domain... hmmm

andy Over a year ago

that's why I was wondering if I could somehow only have my loader run in the background after the thumbnail stuff has run. However, I'd like to do that without having to know anything about the other scripts...

|

Dan Heberden · Accepted Answer · 2010-06-23 01:13:23Z

2

Scripts are loaded top down, and body onloads are normally appended to existing onloads - so as long as that $(function().. is at the end of the page, it'll be ran last. (last (as per nick's comment) meaning the initial parse/run of the document)

answered Jun 23, 2010 at 1:13

Dan Heberden

11.1k3 gold badges35 silver badges29 bronze badges

3 Comments

Nick Craver Over a year ago

This is kind of true, in the case of jQuery (usually) most code is attached to a ready handler, which is executed later, so while it's evaluated/hooked up in that order, the actual work is done later, when the ready event happens.

andy Over a year ago

thanks dan. So, are you saying I don't need the .ready() or .load()? just call the function at the bottom of the page?

Nick Craver Over a year ago

@andy - For the code you posted, there's no reason to wait for either, if you were doing something that needed DOM elements to be ready, you need document.ready, if you're not messing with any, no need.

Collectives™ on Stack Overflow

How to run a jQuery function after all and any other javascript has run

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related