1

我一直在使用您在此处找到的 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 标签具有“宽度”样式属性：

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

所以有“高度”样式属性，但没有“宽度”属性，一旦我调整了窗口大小，fullBg() 就完成了它的功能。我应该更正什么以使其在 FF 和 Chrome 中都能正常工作？

提前致谢！

更新：修正了左括号错字

4

1 回答 1

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

更新：示例扩展

于 2012-08-02T10:32:37.427 回答