A Useful JavaScript Image Loader

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:

Set event handler (which is a function) so that you can process the image after it is loaded:

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:

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

33 Comments A Useful JavaScript Image Loader

  1. JacobF

    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

  2. ade

    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

  3. Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine

  4. Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine

  5. Pingback: 75 (Really) Useful JavaScript Techniques | aboutCREATION

  6. Pingback: 75 (Really) Useful JavaScript Techniques | POLPDESIGN

  7. Pingback: 75 (Really) Useful JavaScript Techniques | The Human Network (HCI IDC Alumni Blog)

  8. Pingback: 75 Useful JavaScript Techniques | download

  9. Pingback: MyWeb2.0Pedia » Blog Archive » JavaScript Image Loader

  10. Pingback: 75 (Really) Useful JavaScript Techniques | rowebdesign

  11. Pingback: 75 useful Javascript Techniques | rafdesign

  12. Pingback: Design Feeds » Blog Archive » 75 (Really) Useful JavaScript Techniques

  13. Pingback: 70 técnicas JavaScript profesionales + tutoriales avanzados. | AlainAlemany

  14. Pingback: 75 (Really) Useful JavaScript Techniques « Where LOVE begins

  15. Pingback: 75 (Really) Useful JavaScript Techniques | Evolution : weblog

  16. Pingback: Web Pickz » Blog Archive » 75 Useful JavaScript Techniques

  17. Pingback: 75 (Really) Useful JavaScript Techniques | forcto.com

  18. Pingback: Useful JavaScript Techniques « the gypsy

  19. Pingback: http://www.scriptremix.com/

  20. Pingback: 70 técnicas JavaScript profesionales + tutoriales avanzados. | Webizzima

  21. Cazz

    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?

  22. Pingback: 75 (Really) Useful JavaScript Techniques « Ramesh

  23. ???

    ??????????? ??????? ?? ??????? ??????? ? ???????? ????????? ?? ????????????. ????????????? ? ??????? ???????????? ??????????. ??????????? ? ???????????? ? ?????? ? ??????. ????????, ?????? ? ???????????? ?? ????????????

  24. Pingback: 75 (Really) Useful JavaScript Techniques | 9Tricks.Com - Tips - Tricks - Tutorials

  25. Pingback: 網站製作學習誌 » [Web] 連結分享

  26. Pingback: 75 (Really) Useful JavaScript Techniques « PSD to HTML , Slicing PSD to HTML

  27. Pingback: 75 (Really) Useful JavaScript Techniques » 逗派

Comments are closed.