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：完整是完整加載的圖像的狀態（沿其餘數據傳遞）...不，它不是

更新：擴展示例