useful short script for firing events when an image is loaded

gistfile1.js

function when_loaded($img, callback) {
  if ($img.attr("complete") || $img.attr("readyState") === 4) {
    callback.call();
  } else {
    $img.load(callback);
  }
}

function load_image(img_url) {
  return $('<img/>').attr('src', img_url);
}

function load_and_then_fade_in(img_url, $el) {
  var $img = load_image(img_url);
  $el.hide(); //best to have it already hidden in css though so it won't show an extra flash
  when_loaded($img, function() {
    $el.css("background-image", "url("+img_url+")")
    $el.fadeIn();
  });
}

function recursive_show(el_list) {
  if (el_list.jquery != undefined) {
    el_list = $.makeArray(el_list).reverse();
  }
  if (el_list.length == 0) { return; }

  var current_el = $(el_list.pop());
  if (el_list.length >= 0) {
    current_el.css('visibility','visible').hide().fadeIn('slow');
    setTimeout(function() { recursive_show(el_list); }, 300);
  }
}