Pre-loading images using Jquery

I am trying to integrate JQuery with Vaadin and i am absolutely clueless at this point. Where do we add the .JS files and are there any good tutorial for executing Jquery javascript client code in a server side framework like vaadin.

Here is the JS i want to execute when loading all of my application's images

(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);
    }
  }

Source: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Do you absolutely have to use JQuery?

Another way to preload the images is just to use the executeJavascript() method on the Window object.

window.executeJavaScript("(new Image()).src='http://imagetopreloadurl.png';");

Thanks for this, i will try this instead and let you know