[cla] Proposal: Image Loader Module for Dojo 1.9

[Brandon Payton]

I have needed to dynamically load images in multiple projects and scenarios over the last year, and while it is not difficult to occasionally write a small module that does just what I need, this seems like something that would be useful in the toolkit.

Because Dojo 2.0 is slated for 2014, I'm proposing this for the 1.9 release.

I have attached a zip file containing the proposed module. If you prefer, you can clone the repository:

git clone --recursive https://github.com/brandonpayton/dojo-image-loader.git

One comment on the choice of API: I placed the optional options argument first in the function signatures to allow easier creation of partial functions; though, as I write this, I realize it's not hard to wrap the image loader function if the imageLoad() argument order was reversed.

Any feedback is appreciated.

If there is interest, please let me know how to contribute the code to the foundation.

Thanks!

[Brandon Payton]

Here are some examples of the proposed API:

require([ "src/image-load" ], function(imageLoad){

	// To load an array of images, pass a URL string or attribute hash for each image
	imageLoad([
		"http://absolute.url.to/image.png",
		"relative/path/to/image.jpg",
		{
			src: "whyIsThisA.gif",
			width: 42,
			height: 42
		}
	]).then(function(imageArray){
		// Have fun.
	});

	// To load a hash of images, pass a hash with a named URL string or attribute hash for each image
	imageLoad({
		first: "onePath.png",
		second: {
			src: "twoPath.png",
			alt: "to two too"
		},
		third: "threePath.png"
	}).then(function(imageMap){
		// Have more fun.	
	});

	// To configure the loader, pass an options hash as the first parameter.
	imageLoad({
		// a src root for relative URLs. May itself be relative or absolute.
		srcRoot: "base/path",

		// Attributes applied to each image when not already specified for the image
		defaultAttributes: {
			width: 24,
			height 24
		}
	},[
		"plane.png",
		"train.png",
		"automobile.png"
	]).then(function(imageArray){
		// Enjoy an array of uniformly-sized images.
	});

	// To load a single image, pass a URL string or a hash of image attributes.
	// one() supports a leading options parameter like the main load function.
	imageLoad.one("http://some.domain/images/best.png").then(function(bestImage){
		// Only the best.	
	});;
});

[bill]

One of you guys should process this ticket; I know you've been closing most enhancement requests telling people to put their code in github. Except, this code is already in github.

[dylan]

I think it's an interesting enough loader plugin to consider making it available as part of Dojo. That said, I'm not sure I'm in the majority in seeing the usefulness of it. I'll discuss with others.

[Brandon Payton]

This submission isn't a loader plugin, just a standalone loader, but it would be ~3 lines of code to make it a plugin.

I left it out because I knew Kitson wasn't a fan and because it seemed like it could cause loader timeouts if used with larger images or a slow connection.

I'm up for making it a plugin if that is the consensus.

[dylan]

brandonp, given that it's in github, and the plan is to move most things like this to github for Dojo 2, I think the best plan for now would be to register it as a package at ​http://packages.dojofoundation.org/

While this won't get as much publicity as including it in 1.9, I plan to write up a section of the 1.9 announcement highlighting the many great new packages people can use with Dojo.

Please bug me to make sure I don't forget this.

[Brandon Payton]

Thanks, Dylan. I just noticed that you had responded.

That sounds great if it's not already too late. I'll convert this to a real package and let you know.

[Brandon Payton]

I've converted it to a standalone package and changed the project name. The new URL is: ​https://github.com/brandonpayton/image-load

I have also registered it as a package at ​http://packages.dojofoundation.org/

Thanks!