jQuery脚本在FF工作，但无法在Chrome

Question

我一直在使用你的fullBg脚本这里找到：http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

(function($) { 
    $.fn.fullBg = function(){ 
    var bgImg = $(this);   

    function resizeImg() { 
     var imgwidth = bgImg.width(); 
     var imgheight = bgImg.height(); 

     var winwidth = $(window).width(); 
     var winheight = $(window).height(); 

     var widthratio = winwidth/imgwidth; 
     var heightratio = winheight/imgheight; 

     var widthdiff = heightratio * imgwidth; 
     var heightdiff = widthratio * imgheight; 

     if(heightdiff>winheight) { 
     bgImg.css({ 
      width: winwidth+'px', 
      height: heightdiff+'px' 
     }); 
     } else { 
     bgImg.css({ 
      width: widthdiff+'px', 
      height: winheight+'px' 
     });  
     } 
    } 
    resizeImg(); 
    $(window).resize(function() { 
     resizeImg(); 
    }); 
    }; 
})(jQuery) 

和它似乎是工作在FF得很好，但无法在Chrome。我会很感激，如果你只是快速看看你的脚本的用法有什么问题，因为我已经用完了想法......我使用jquery-ujs rails插件来处理ajax请求（https：// github .COM /导轨/ jQuery的UJS /维基/ AJAX）

(function() { 

    $(window).load(function() { 
    var Layout; 
    $(function() { 
     return $(".thumb_container").draggable({ 
     containment: 'document', 
     scroll: false, 
     zIndex: 5 
     }); 
    }); 
    $('.background').fullBg(); 
    Layout = { 
     config: { 
     effectIn: 'fadeIn', 
     effectOut: 'fadeOut', 
     speed: 300 
     }, 
     init: function() { 
     $('.thumb').on('ajax:success', this.changeData); 
     return $('.thumb').on('ajax:complete', this.changeBg); 
     }, 
     changeData: function(event, data, status, xhr) { 
     var config, effectIn, effectOut, imgPath, speed; 
     config = Layout.config; 
     effectIn = config.effectIn; 
     effectOut = config.effectOut; 
     speed = config.speed; 
     imgPath = data.image_bg; 
     $(".background")[effectOut](speed).detach(); 
     $("<img class='background'>").appendTo('#container').attr({ 
      src: imgPath, 
      'data-id': artistId 
     }); 
     return event.preventDefault(); 
     }, 
     changeBg: function(xhr, status) { 
     return $('.background').fullBg(); 
     } 
    }; 
    return Layout.init(); 
    }); 

}).call(this); 

我试着用AJAX：完整的，没有它。它的工作原理在FF任何情况下，和IMG标签具有 '宽' 风格ATTR：

<img class="background" src="/media/BAhbBlsHOgZmSSIsMjAxMi8wNi8yMy8yMl8yOV8xN180NzhfXzY1XzU1XzIwMDIuanBnBjoGRVQ" data-id="1" style="width: 1246px; height: 1477px;"> 

，但在Chrome中似乎是一半，例如。

<img class="background" src="/media/BAhbBlsHOgZmSSIsMjAxMi8wNi8yMy8yMl8yOV8xN180NzhfXzY1XzU1XzIwMDIuanBnBjoGRVQ" data-id="1" style="height: 399px; "> 

所以有 '高度' 的风格ATTR，但NO '宽度' ATTR，一旦我调整窗口，fullBg（）完成其功能。 我应该纠正哪些问题才能在FF和Chrome中使用？

在此先感谢！

UPDATE：开括号错字固定

Answer 1

而且解决问题的方法是，脚本需要等待调用fullBg（）函数，直到图像满载

(function() { 

    $(window).load(function() { 
    var Layout; 
    $(function() { 
     return $(".thumb_container").draggable({ 
     containment: 'document', 
     scroll: false, 
     zIndex: 5 
     }); 
    }); 
    $('.background').fullBg(); 
    Layout = { 
     config: { 
     effectIn: 'fadeIn', 
     effectOut: 'fadeOut', 
     speed: 300 
     }, 
     init: function() { 
     $('.thumb').on('ajax:success', this.changeData); 
     }, 
     changeData: function(event, data, status, xhr) { 
     var config, effectIn, effectOut, imgPath, speed; 
     config = Layout.config; 
     effectIn = config.effectIn; 
     effectOut = config.effectOut; 
     speed = config.speed; 
     imgPath = data.image_bg; 
     $(".background")[effectOut](speed).detach(); 
     $("<img class='background'>").appendTo('body').attr({ 
      src: imgPath, 
      'data-id': artistId 
     }).load(function() { 
      $(this).fullBg(); 
     }); 
     } 
    }; 
    return Layout.init(); 
    }); 

}).call(this); 

我认为ajax：完整是完整加载的图像的状态（沿其余数据传递）...不，它不是

更新：扩展示例