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标签具有'width'样式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 'width'attr，一旦我调整窗口大小，fullBg（）就完成了它的功能。我应该纠正什么才能使它在FF和Chrome中都有效？

提前致谢！

更新：打开括号错误修正

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：complete是满载图像的状态（沿着传递的其余数据）...不，它不是

更新：扩展示例

jQuery脚本适用于FF，但不适用于Chrome

1 个答案: