A multipart XHR loader
JavaScript Perl
Permalink
Failed to load latest commit information.
Mxhr.pm added support for streaming images Jan 25, 2011
README.markdown
license Licenses added Nov 14, 2010
supply.js
supply.min.js
supply.pl added support for streaming images Jan 25, 2011

README.markdown

SupplyJS

Delivering Javascript-, Stylesheet- & Image- files over a single request, using MXHR.

Example:

<script src="/js/supply.min.js?v=2"></script>
<script type="text/javascript">
supply.setDealer('/cgi-bin/supply.pl').files({
    debug: false,
    javascript: [
        '/js/jquery-1.4.2.min.js',
        '/js/jquery-ui-1.8.4.custom.min.js',
        '/js/init.min.js',
        '/js/box.min.js',
        '/js/app.min.js'
    ]           
});             
</script>

Only supply.min.js is loaded via the conventional <script src=""> method. All other files in this example, are then fetched on the server and pushed to the browser in a single request (instead of five). Since each request means overhead this is pretty fast.

New

Streaming images! Since version 1.1.0, you can also stream images with SupplyJS. This could look like:

supply.listen('image/jpg', function(payload, filename) {
    jQuery('<img>', {
        src: 'data:image/jpeg;base64,' + payload
    }).appendTo(document.body);;
});

supply.setDealer('/cgi-bin/supply.pl').files({
    debug: false,
    images: [
        '/images/foo.jpg',
        '/images/bar.jpg',
        '/images/another.jpg'
    ]
});

As a rule: The more files you're loading, the greater is the benefit you gain using Supply!

Example & Playground: http://www.typeofnan.com/lab/mxhr-stream/

Configuration

You need to setup two things. First, supply.js needs to know the path and the name from the server-script part. Either change the dealer variable directly in supply.js:

dealer  = '/cgi-bin/supply.pl',     // server script which deals us the data

or call supply.setDealer() before you call supply.files():

supply.setDealer('/cgi-bin/supply.pl');

The second thing that needs to be configured is the servers absolute path to your files. This can be done in supply.pl:

my $base_dir = "/var/www/typeofnan";

So if we pass /js/init.min.js to supply.files(), supply.pl will open

/var/www/typeofnan/js/init.min.js`

Done.

Moar server scripts!

I just have a perl version online right now. But the function of the backend part is really trivial. Basically it is:

  • open a file
  • read the files content
  • concat it
  • send the concatinated string

I will follow up soon with a PHP version. I'd be happy about any contribution on that part too. Anything is possible here, nodeJS, Rails, Python and whatnot.