Sponsored and developed by TrestleMedia

Autload JS automatically loads javascript files found in your theme's "js" subfolder.

Which files it loads depends on which page the user is viewing and where you put the files. It will load all files in the 'all' folder on every page, or all files in the 'front' folder on the front page. Options for page path, node type, first component of the URL, and more exist.

For example, as soon as it's turned on, your javascript files are loaded automatically just by naming them right:

path/to/theme/js/all.js - Loaded on all pages
path/to/theme/js/front/file1.js - Loaded on front page
path/to/theme/js/front/file2.js - Also loaded on front page
path/to/theme/js/nodetype--blog.js - Loaded on blog nodes
etc.



Quick start instructions

  1. Download and enable the module.
  2. Start putting js files into your theme's js folder using the naming suggestions below. Make subfolders as appropriate.

That's it!

Why use autoload_js?

I'm kind of surprised autoload_js hasn't gained more popularity yet, so I thought I'd point out some of the reasons I think it's advantageous to use:

  • It's easier.
  • Adding new javascript files to your site can be simply a matter of putting them in the folder. No module, template.php, or theme.info changes needed. Control logic for loading is built in, so themers don't need to know how to dig up info on the current node, page arguments, etc.

  • Better organization
  • Instead of lumping all of your javascript into one big custom.js file, keep a meaningful organizational structure to help find code and understand at a glance where it's running.

  • Performance
  • All those little jquery hacks that are combing every page of your site when they only need to be in one place add up to client side performance hits. Autoload_js makes it easier to run code only where it needs to run, and users will be downloading less superfluous content per page.

  • Safer code
  • Running javascript that manipulates the document on only the pages necessary eliminates errors and potential conflicts that might otherwise occur when unscrupulously running it elsewhere. It simplifies jQuery selectors or other logic that might be overly/needlessly complex without the auto loader.

Of course, you could break apart your site's js files manually into different files and use custom PHP logic to load them where you need them yourself, but autoload_js can do a lot of this work for you.

Available suggestions:

  • "all" - For all pages
  • "front" - For front page
  • "pagetitle--[title]" - A page with title "My blog" would have the suggestion "pagetitle--my-blog"
  • "pagepath--[path]" - A page with the URL of "path/to/blog" would have the suggestion "pagepath--path-to-blog". Aliased and non-aliased version of the path are both available.
  • "pagepath--arg0--[pathcomponent]" - A suggestion based on the first component of the url path.
    A page with the URL of "/blog/jan/1" or a page with the URL of "/blog/feb/1" would have the suggestion "pagepath--arg0--blog".
  • "nodetype--[type]" - When viewing a node page of type "page", the suggestion would be "nodetype--page"
  • "nodeid--[id]" - Viewing the page of node 27 would get "nodeid--27"
  • "nodetitle--[title]" - A node page with title "This is my node" would have the suggestion "nodetitle--this-is-my-node"

How suggestions work:

Suggestions work in two ways:

1. The module will attempt to add a matching js file in your theme's js sub-folder. For example, for the suggestion "nodetype--blog", "path/to/theme/js/nodetype--blog.js" will be loaded
(if it exists).

2. If a folder exists in your theme's js sub-folder with a name that matches the suggestion, ALL the files in that folder will be loaded. For example:

"path/to/theme/js/nodetype--blog/file1.js"

"path/to/theme/js/nodetype--blog/file2.js"

"path/to/theme/js/nodetype--blog/anyotherfiles.js"

etc...

Project information

Releases