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 に答える