Question

I know that the title is very subtle but I have absolutely no idea how I should title this issue nor what the hell is happening with this function.

function update_background(source, isSystem){
    if (!isSystem) {
        source.replace(/\/tn_/, '');
        jQuery('div#drag_container img[alt="background"]').attr('src', source); //*1
        jQuery('div#drag_container img[alt="background"]').attr('style', '');
        var height = jQuery('div#drag_container img[alt="background"]').height();
        var width = jQuery('div#drag_container img[alt="background"]').width();
        var ratio = Storyboard['format'];
        //Don't touch the paddings, they are correct!
        if (height * ratio > width) {
            var padding = (Storyboard['display'] - (width * (Storyboard['height'] / height))) / 2;
            jQuery('div#drag_container img[alt="background"]').css({
                'height': Storyboard['height'],
                'padding-left': padding
            });
        } else {
            var padding = (Storyboard['height'] - (height * (Storyboard['display'] / width))) / 2;
            jQuery('div#drag_container img[alt="background"]').css({
                'width': Storyboard['display'],
                'padding-top': padding,
                'padding-bottom': padding
            });
        }
    } else {
        jQuery('div#drag_container img[alt="background"]').attr('src', source).attr('style', '');
        jQuery('div#drag_container img[alt="background"]').css({
            'width': Storyboard['display'],
            'height': Storyboard['height']
        });
    }
}

What this function is supposed to do, is take a picture, get the size of it, compare it to the the size of the container it will be shown in, resize it so that it is as big as possible without sticking out of the container and then finally, apply padding where needed to center the image. It does not matter if the picture is landscape or portrait, the function knows exactly what to do. The picture is cached so that we don’t get wrong values (I already had a bug like that). In case it is a System Background, we don’t care for correct size and padding. Worked flawless for 3 months.

Lately, it is behaving rather odd. At the line with the comment *1, it does not only reset the src attribute of the img-tag, but it also sets a height and a padding, as if it already were in the padding calculations. They are removed again on the next line (which wasn’t actually inserted for that purpose but was inserted to get the original dimensions of a picture) and it still works.

Unless, of course, you let the function run at regular speed, where it does not reset the style. I am quite irritated by this Bug as I have no idea where to start searching.

The function is only called once. It only runs once through the function. It is not included in an event and this function is called in 2 totally different places.

Any ideas?

Edit 1

I have found out that the Bug does not occur in every Browser.

• Mac OS X Snow Leopard
• Firefox: behavior as described
• Opera: does it all wrong, but is not supported by our company
• Safari: Still works flawless
• Windows XP
• Chrome: Works same as Safari
• Firefox: Behavior as described
• IE8: Same Behavior
• IE7: Actually Works!
• Linux
• Firefox: Behavior as described
• Konqueror: does not even work with my JavaScript

Answer 1

You might be having problems getting the size of the image because it isn’t guaranteed that it has been loaded by the time you’re checking its dimensions.

var $img = jQuery('div#drag_container img[alt="background"]');
$img.bind('load', function(){
    // do all of your stuff with the width and the height of the image in here...
    var width = $(this).width();
    var height = $(this).height();
});
$img.attr('src', source);  /* kicks off the loading of the image, the bound function 
                            * above will get called when it's done.
                            */