download image first, then apply fadeIn

download image first, then apply fadeIn

i have this code that works
  2. <head>
  3. <script type="text/javascript">
  4. $(function () {
  5. var img = new Image();
  6. $(img).load(function () {
  7. $(this).hide();
  8. $('#divContent').append(this);
  9. $(this).fadeIn();
  10. }).attr('src', 'images/main.jpg');
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <div id="divContent"></div>
  16. </body>
but this code limits 1 image and the name of the image is placed inside the js function. 
my question is: 
can i alter this code or can someone share an idea to write a more generic version so that i can download the image first THEN apply some jQuery to it like:
  2. <head>
  3. <script type="text/javascript">
  4. $(function () {
  5. var img = new Image();
  6. $(img).load(function () {
  7. $(this).hide();
  8. $('#divContent').append(this);
  9. $(this).fadeIn();
  10. }).attr('src', 'APPLY TO THE DIV HERE');
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <div id="divContent"><img src="images/main.jpg" /></div>
  16. </body>