«

A Useful JavaScript Image Loader

Posted on February 21, 2008
Filed Under Javascript | 34 Comments     


imageloader.js
Online Example

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

imageloader.js

/**
* 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;
  }
};
If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.
34 Comments so far
  1. Vayu February 22, 2008 7:33 am
    Hi. I cant seem to get it to upload images from local computer. How do I do this?
  2. Cuong February 22, 2008 10:00 pm
    You can't. This is not a image upload script but rather a script that dynamically loads image for a given URL.
  3. Ganesh March 6, 2008 2:18 am
    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.
  4. JacobF April 15, 2008 6:29 am
    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
  5. ade June 19, 2008 8:39 am
    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
  6. [...] 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. [...]
  7. [...] 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. [...]
  8. Rajassegarin September 12, 2008 4:12 am
    Great Work.
    Your code works Perfectly.

    Thanks
    www.ipodvideos.in
  9. [...] 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. [...]
  10. [...] 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. [...]
  11. [...] 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. [...]
  12. 75 Useful JavaScript Techniques | download September 14, 2008 8:04 am
    [...] 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. [...]
  13. [...] 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  [...]
  14. [...] 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. [...]
  15. 75 useful Javascript Techniques | rafdesign September 20, 2008 3:44 am
    [...] 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. [...]
  16. [...] 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. [...]
  17. [...] JavaScript Image Loader [...]
  18. [...] 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. [...]
  19. [...] 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. [...]
  20. directory November 18, 2008 11:07 pm
    This is great, look forward to looking into every area. Thanks for being there.
  21. cwxwwwxdfvwwxwx December 25, 2008 7:18 am
    well, hi admin adn people nice forum indeed. how's life? hope it's introduce branch ;)
  22. [...] 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. [...]
  23. [...] 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. [...]
  24. [...] 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. [...]
  25. http://www.scriptremix.com/ April 23, 2009 9:56 am
    <strong>A Useful JavaScript Image Loader ...</strong>

    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...
  26. [...] JavaScript Image Loader [...]
  27. Cazz June 9, 2009 4:53 am
    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?
  28. [...] 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. [...]
  29. ??? September 27, 2009 6:53 am
    ??????????? ??????? ?? ??????? ??????? ? ???????? ????????? ?? ????????????. ????????????? ? ??????? ???????????? ??????????. ??????????? ? ???????????? ? ?????? ? ??????. ????????, ?????? ? ???????????? ?? ????????????
  30. [...] 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. [...]
  31. 網站製作學習誌 » [Web] 連結分享 November 24, 2009 6:41 pm
    [...] A Useful JavaScript Image Loader : Code Central [...]
  32. [...] This is another script inspired by Coda. Essentially, it&rsquo;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. [...]
  33. z2gt user February 4, 2010 1:57 pm
    hello I've found this site cloaks your traffic source is it true
  34. [...] 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. [...]
Code Central Special

Polls

  • Which browser are you using to browse this site (v.2)?

    View Results

    Loading ... Loading ...