jQuery:JavaScript没有按照我告诉它的做

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

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标记的src属性，而且还设置高度和填充，就好像它已经在填充计算中一样。它们在下一行再次被删除（实际上并不是为了这个目的插入的，而是为了获得图片的原始尺寸而插入的），并且仍然有效

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

该函数只调用一次。它只在函数中运行一次。它不包含在事件中，此函数在两个完全不同的位置调用

有什么想法吗

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

• MacOSX雪豹
• Firefox：行为如前所述
• Opera：这一切都错了，但我们公司不支持
• Safari：依然完美无瑕
• 视窗XP
• Chrome：工作原理与Safari相同
• Firefox：行为如前所述
• IE8：同样的行为
• IE7：真的有效
• Linux
• Firefox：行为如前所述
• Konqueror：甚至不能使用我的JavaScript

---

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

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

---

哎哟您可能希望将jQuery的结果（'div#drag_container img[alt=“background”]”存储在局部变量中。我订购了一本关于jQuery性能的书，因为这只是我在其中编写的第二个主要项目/应用程序。最近我注意到性能有点拖累，所以我会在重构JS代码时这样做。无关：使用$（…）而不是jQuery（…）？我开始习惯使用jQuery而不是$，因为一开始我们在jQuery旁边有原型。我们消除了原型，但习惯仍然存在。实际上，它可以确定它是加载的，因为图像要么是相同的，要么是通过图像选择器选择的，在图像选择器中加载预览。实际上，错误发生在图像没有改变但容器尺寸改变的部分。有时有效，但大多数时候无效。