// Load images once the page has loaded
function showImgsOnLoad()
{
    $("img.delayLoad").each(function() {
    	
        // Create a new span element which we will wrap around our image
        // Using a span because if the image was inside an <a> tag then online inline elements should be used
        var delaySpan =  document.createElement("span");
 
        with ($(this)) {
            // Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
            if (css('display') == 'none') {
                var _display = 'none' } else {
                var _display = 'block' }
            
            // Force display BLOCK
            var _display = 'block';
            
            // Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
            var cssObj = {
                'height' : css('height'),
                'width' : css('width'),
                'margin-top' : css('margin-top'),
                'margin-right' : css('margin-right'),
                'margin-bottom' : css('margin-bottom'),
                'margin-left' : css('margin-left'),
                'background-image' : css('background-image'),
                'background-color' : css('background-color'),
                'background-repeat' : css('background-repeat'),
                // Hack for now, becuase IE doesn't seem to read the background-position property correctly
                'background-position' : '50% 50%',
                'display' : _display
            }
        }
        
        // Apply our style properties to our span    
        $(delaySpan).css(cssObj);
        
        // Wrap the image in the span
        $(this).wrap(delaySpan)
        
        // Hide the image (leaving just the span visible
        .hide()
        
        // Simulate the mouse over the image, whcih will cause it to switch the img src
        .mouseover()
        
        // Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
        .removeAttr("onmouseover")
 
        // Simulate the mouse moving out of the image (To reset the image to its normal state)
        .mouseout()
 
        // Once the image is loaded, perform a function
        .load(function () {
            // Fade the image in
            // Remove the span by unwrapping the image
            $(this).fadeIn().unwrap();
        });
    });
}