jQuery 脚本在 FF 中有效，但在 Chrome 中无效答案

【问题标题】：jQuery script works in FF but not in ChromejQuery 脚本在 FF 中有效，但在 Chrome 中无效
【发布时间】：2012-08-01 11:06:00
【问题描述】：

我一直在使用您在此处找到的 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/rails/jquery-ujs/wiki/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:complete，没有它。它在任何情况下都可以在 FF 中使用，并且 img 标记具有 'width' 样式属性：

<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; ">

所以有 'height' 样式属性，但是 NO 'width' attr 并且一旦我调整了窗口大小，fullBg() 就完成了它的功能。我应该更正什么以使其在 FF 和 Chrome 中都能正常工作？

提前致谢！

更新：左括号错字已修复

【问题讨论】：

我不太熟悉您使用的库，但 function($) 和 (function() 对我来说似乎很奇怪。他们不应该都是$(function() 吗？
第一个代码块与 fullBg jQuery plugin 相关，并且 AFAICS 缺少左括号 (function($) { ... })(jQuery);。 @ericosg 这两个代码块正在使用IIFE pattern。
我不是 CSS 或 jQuery 专家，但我认为仅使用 CSS 就可以实现整页背景。请参阅基于this blog post 的this example。
@Favio Cysne：当然！抱歉错字，有左括号。更新。还没有尝试过CSS。如果我在接下来的 3 天内找不到此问题的问题，肯定会考虑任何其他解决方案。
@Favio Cysne：css 版本不适合我，因为我需要在调整大小后保留纵横比...

标签： jquery ajax firefox google-chrome

【解决方案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:complete 是完全加载图像的状态（以及传递的其余数据）......不，不是

更新：扩展示例

【讨论】：