Preload image resources of type png and gif into qx.ui.basic.Image instances and add them to the application root offscreen at position -5000, -5000

MPreloadImageResource.js

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2015 Visionet GmbH, http://www.visionet.de

   License:
   License:
     MIT: https://opensource.org/licenses/MIT
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Dietrich Streifert (level420)

************************************************************************ */

/**
 * Add a method to preload images
 *
 */
qx.Mixin.define("visionet.application.MPreloadImageResources",
{
  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */

  members :
  {
    /**
     * Preload image resources of type png and gif into qx.ui.basic.Image instances
     * and add them to the application root offscreen at position -5000, -5000
     * 
     * @param pathfragment {String|null} only preload if pathfragment is contained (via indexOf) in the resource name
     */
    preloadImageResources : function(pathfragment) {
      
      var root = qx.core.Init.getApplication().getRoot();
      if(!root) {
        this.error("unable to preload images: qx.core.Init.getApplication().getRoot() not yet available!");
        return;
      }
      
      var rm = qx.util.ResourceManager.getInstance();
      
      var ids = rm.getIds?rm.getIds(pathfragment):null;
      if(!ids) {
        var resources = qx.$$resources;
        if(!resources || typeof resources !== "object") {
          this.warn("unable to preload images: resource hash qx.$$resources not initialized or not an object");
          return;
        }
        ids = [];
        for (var id in resources) {
          if (resources.hasOwnProperty(id)) {
          
            if(pathfragment && id.indexOf(pathfragment) == -1) {
              continue;
            }
            ids.push(id);
          }
        }
      }
      
      var loadedCombined = {};

      for(var i = 0; i < ids.length; i++) {
        var id = ids[i];
        var res = rm.getData(id);
        if(qx.lang.Type.isArray(res) && (res[2] == "png" || res[2] == "gif")) {
          // simple images
          if(res.length == 4) {
            if (qx.core.Environment.get("qx.debug")) {
              this.debug("preloading image: " + id);
            }
          }
          // combined images
          else if(res.length == 7) {
            var cid = res[4];
            
            if(!cid || loadedCombined[cid]) {
              // combined base image already loaded 
              continue;
            }
            loadedCombined[cid] = true;
            id = cid;
            if (qx.core.Environment.get("qx.debug")) {
              this.debug("preloading combined image: " + id);
            }
          }
          
          var image = new qx.ui.basic.Image(id);
          root.add(image, {top:-5000, left:-5000});
        }
      }
    }
  }
});

To use it in your app you have to add an asset hint for the images to be loaded in your app like this:

/**
 * @asset(myassets/*)
 */

and use the the mixin like this:

extend : qx.application.Standalone,
include : [
  visionet.application.MPreloadImageResources
]

then in the main method of your application call the preloader:

main : function()  {
  this.base(arguments);
  this.preloadImageResources("myassets/");
}