javascript - jQuery:JavaScript 没有按我说的做

Question

我知道标题非常微妙，但我完全不知道我应该如何命名这个问题，也不知道这个函数到底发生了什么。

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']
        });
    }
}

这个函数应该做的是拍照，获取它的大小，将它与将要显示的容器的大小进行比较，调整它的大小，使其尽可能大而不突出容器，最后，在需要的地方应用填充以使图像居中。不管图片是横向的还是纵向的，函数都知道该做什么。图片已缓存，这样我们就不会得到错误的值(我已经遇到过这样的错误)。如果是系统背景，我们不关心正确的大小和填充。完美地工作了 3 个月。

最近，它表现得很奇怪。在注释 *1 的行，它不仅重置了 img-tag 的 src 属性，而且还设置了高度和填充，就好像它已经在填充计算中一样。它们在下一行被再次删除(实际上并不是为了那个目的而插入，而是为了获得图片的原始尺寸而插入)并且它仍然有效。

当然，除非您让函数以正常速度运行，它不会重置样式。我对这个 Bug 很恼火，因为我不知道从哪里开始搜索。

该函数只被调用一次。它只通过函数运行一次。它不包含在事件中，并且在 2 个完全不同的地方调用此函数。

有什么想法吗？

编辑 1

我发现并不是每个浏览器都会出现这个错误。

• Mac OS X 雪豹
• Firefox:描述的行为
• Opera:做错了，但我们公司不支持
• Safari:仍然完美运行
• Windows XP
• Chrome:与 Safari 一样工作
• Firefox:描述的行为
• IE8:相同的行为
• IE7:实际有效!
• Linux
• Firefox:描述的行为
• Konqueror:甚至不能使用我的 JavaScript

Answer 1

您可能在获取图像尺寸时遇到问题，因为无法保证在您检查尺寸时图像已加载。

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.
                            */