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

我发现每个浏览器都不会出现Bug。

Mac OS X Snow Leopard

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

jQuery：JavaScript没有按照我的说法去做

编辑1

1 个答案: