A new script loader

One of the biggest headaches developers and site builders see when developing jQuery functionality within joomla is a javascript conflict that results from multiple versions of jQuery loading on a page. This is mainly triggered in cases where script declarations are declared after the $ name space has been re-declared by another javascript library.

Technically, jQuery should be able to load as many times as you want on a page - although best practice is to only load one. Even with multiple instances of the jQuery library loading on the page, it's core functionality should remain unaffected. However because Joomla components, modules and plugins are triggered at different times during a page render and because there are a few different ways to include assets within that rendering, it's not always possible to control the exact order that scripts are loaded on the page and so we often end up with a jQuery conflict.

Native jQuery behaviours for Joomla 3.0

Joomla 3.0 changes this of course via the native jQuery behaviours, and while for the most part you will not need to use JB Library in Joomla 3.0, for earlier versions of Joomla, solutions such as a script loader are a good way to get around the issue.

The script loader can be used to perform the following functions and contains the following features:

• We have moved the plugin event listener to onAfterRender, so we can catch all rendered javascript files.
• Using script loader we make sure we have the scripts load in the correct order and in asynchronous way.
• It only loads the next script after the last one is fully loaded (all scripts loads asynchronously with the page).

Controlling the order files are loaded on the page.

When the script loader function is enabled the javascript assets on the page are loaded in the following order.

1. Script Loader
2. Mootools
3. Mootools More
4. Joomla Core JS
5. jQuery
6. jQuery noConflict
7. Other JS scripts (the same order they were found)
8. User Script Files (the same order they were found)

The beginnings of the new Zen library

This version of the library also includes the beginnings of our new Zen library. The Zen library is a collection of tools that we have designed to replace or at least combine a lot of the shared functionality between the Zen Grid Framework and the JB Library plugin. This means that our codebase will become more unified and it will hopefully free up some of the dependancies currently required by our extensions. The intention is centralize some classes, methods or behaviors in libraries, so we can share code between our Joomla extensions and framework to keep our codebase as clean as possible.

Cases where you would use JB Library in Joomla 3.0

When JB Library for Joomla 3.0 was first announced I mentioned some reasons why you would use JB Library with Joomla 3.0.

To recap:

• There is no need to install JB LIbrary in Joomla 3.0 when using our Joomla 3.0 extensions
• JB Library for Joomla 3.0 is more of a developer tool for loading jQuery from the google or jQuery cdn, controlling the version of jQuery being loaded or to remove other instances of jQuery from the page.
• JB Library can be used to load other scripts on the page via the plugin interface
• JB Library can be used to add a scroll to top button on your site
• JB Library can be used to ad the Lazyload for images feature which delays the loading of image suntil they are visible in the viewport.
• You want an easy way to load all javascript at the bottom of the page.

JB Library v2.1 is available now.

If you are using JB Library on your site then please update by downloading JB Library from the JB LIbrary feature page.

blog comments powered by Disqus