A Useful JavaScript Image Loader
I released a YUI implementation of image gallery script a month ago. While it was quite an enjoyable experience to explore the potential of YUI and JavaScript, I found I have created many userful code snips (for instance this Loading Panel) along the way.
Today I am going to show you another useful JavaScript code snip: Image Loader. What! You might ask. I admit that name is too generic, but it does what it does - it helps you to load images using JavaScript. Just give it an image URL, it will return a DOM image object that can be used for dynamic loading of images. This script provides a loading completion event, which is very useful for displaying preloader or extra information when the image is being loaded.
The original image loader I created relies on YUI, but I want to make it as portable as possible, so I created a standalone version.
Usage
First you need to create a new instance of ImageLoader, and feed the loader with an image URL:
var loader = new ImageLoader('IMAGE_URL');
Set event handler (which is a function) so that you can process the image after it is loaded:
loader.loadEvent = function(url, image){
//actions to perform when the image is loaded
//alert(url + ' is loaded');
document.body.appendChild(image);
//hide loading indicator if applicable
}
For example, if you were showing a loading image before the loading sequence and you want to hide it as soon as the image is loaded, you can put your code inside of loadEvent handler. The load Event handler takes two arguments, which are self-explanatory:
- url - The url you specified when instantiating the loader
- image - DOM reprentation of the image, you can call foo.appendChild(image)
Invoke load method on the loader to load the image:
loader.load();
That's all. Still confused by what can this image loader do? Try this example to find out.
As shown in the online example, combining with YUI loading panel, you can make an interesting image loading effect effortlessly.
Complete Source Code
/**
* A simple JavaScript image loaderimage loader
* @author Cuong Tham
* @url http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
* @usage
* var loader = new ImageLoader('IMAGE_URL');
* //set event handler
* loader.loadEvent = function(url, image){
* //action to perform when the image is loaded
* document.body.appendChild(image);
* }
* loader.load();
*/
//source: http://snipplr.com/view.php?codeview&id=561
// Cross-browser implementation of element.addEventListener()
function addListener(element, type, expression, bubbling)
{
bubbling = bubbling || false;
if(window.addEventListener) { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if(window.attachEvent) { // IE
element.attachEvent('on' + type, expression);
return true;
} else return false;
}
var ImageLoader = function(url){
this.url = url;
this.image = null;
this.loadEvent = null;
};
ImageLoader.prototype = {
load:function(){
this.image = document.createElement('img');
var url = this.url;
var image = this.image;
var loadEvent = this.loadEvent;
addListener(this.image, 'load', function(e){
if(loadEvent != null){
loadEvent(url, image);
}
}, false);
this.image.src = this.url;
},
getImage:function(){
return this.image;
}
};
What's Next
More interesting posts ...
Leave a Comment
If you would like to make a comment, please fill out the form below.
If you want to post source code, please wrap it with <pre> and </pre>
Loading ...
Hi. I cant seem to get it to upload images from local computer. How do I do this?
You can't. This is not a image upload script but rather a script that dynamically loads image for a given URL.
Interesting article. I am basically a jquery user and have been using an image preloader plugin for jquery for this purpose. You can see it at http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery.
Still, your article is more useful because, that plugin doesn't have support for loadEvent.
Great :)
I'm using it for a map that can be repositioned. It got rid of the map (the map is a div with a background image) disappearing and then showing up when it's loaded. Nice :D
This is great:)
However, is it possible to tie this into a file upload? So a user can uplaod a file from their pc to a server and then it appears in the page seamlessly? This would be perfect for something im working on. And taking it a step further:) Its able to detect if its a jpg and swf and render the mark up accordingly?
thanks in advance
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
Great Work.
Your code works Perfectly.
Thanks
http://www.ipodvideos.in
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired. http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader [...]
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding TabsThis is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] JavaScript Image Loader [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
This is great, look forward to looking into every area. Thanks for being there.
well, hi admin adn people nice forum indeed. how's life? hope it's introduce branch ;)
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
A Useful JavaScript Image Loader ...
I released a YUI implementation of image gallery script a month ago. While it was quite an enjoyable experience to explore the potential of YUI and JavaScript, I found I have created many userful code snips (for instance this Loading Panel) along the w...
[...] JavaScript Image Loader [...]
Very very nice, love it but it change my size of my image?
I like to have my image as a background but now it like a normal pictures?
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
??????????? ??????? ?? ??????? ??????? ? ???????? ????????? ?? ????????????. ????????????? ? ??????? ???????????? ??????????. ??????????? ? ???????????? ? ?????? ? ??????. ????????, ?????? ? ???????????? ?? ????????????
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
[...] A Useful JavaScript Image Loader : Code Central [...]
[...] This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]
hello I've found this site cloaks your traffic source is it true
[...] Sliding Tabs This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution. [...]