Insert Script


Insert Script is a little jQuery script I created for use to make one of the sites I was creating faster by loading the javascript after the page load. Sure, there are many ways, but I was already using the framework, so I decided to create this based off of it. You can essentially load scripts and other files (extensible) whenever you want, though it is more common as soon as the page loads. In this case, here is an example:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.insert.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $.insert('my_script.js');
});
</script>

The insert() method returns the html object which contains the script being loaded. Because of this, you can chain Insert Script with all of the jQuery methods that come with it, like so:

$(document).ready(function()
{
    $.insert('my_script.js').ready(function()
    {
        alert('My Script was loaded!');
    });
});

The other cool thing about Insert Script is that you can also load other types of files besides Javascript. One example is CSS:

$('#add-css').click(function()
{
    $.insert('my_style.css').ready(function()
    {
        alert('My Style was loaded!');
    });
});

By default, it only supports Javascript and CSS. You can easily extend this by adding an associative array filled with attributes. If you present the script loader with an unknown extension, it will produce the following:

<link type="text/{ext}" href="{file}" />

It replaces {ext} with the extension of the the file and {file} with the file assigned by the first argument provided by the insert() method. You can override the tag and all of the attributes easily like so:

// <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
$.insert({rel: 'alternate', type: 'application/rss+xml', title: 'RSS', href: '/rss.xml'});

// <meta name="description" content="The page description" />
$.insert({elm: 'meta', name: 'description', content: 'The page description'});

As you can see, I changed the default <link> tag to a <meta> tag using the elm key in the array. Insert Script is extremely extensible when it comes to this and can insert just about anything into the header.

If you want to look at the script, it’s available for download in various formats. If you can, look at the code and express anything in the contact area or bug reports/issues at jQuery plugin site. Thanks.

Google Code Home
Insert Script (Minified, 911 b)
Insert Script (Uncompressed, 1.3 kb)

Login




Register
Recover password