1

ajaxから受け取る画像のサイズを設定しました。問題は、成功後に関数を正確に起動する方法がわからないことです。

私のサイズ変更機能（ajaxの後にchrome devコンソールから自分で起動すると機能しますが、 ajax の後に自動的には機能しません）：

function resizePromiseImage(x) {
                x.success(function() {
                    var wW = window.innerWidth,
                         app = $('#app'),
                         picH = 0,
                         ratio = 0,
                         picW = app.find('img').width();

                     if( wW < picW ){
                         app.find('img').css({
                             'width':wW
                         });
                     }
                });
            }

私のajax関数（私が望むように私に画像を与えます）：

function ajax(){
                return $.ajax({
                               url: 'http://blabla.bla/bla.php',
                               success: function(data){
                                    if(data){
                                        var url = 'http://blabla.bla/bla/'+data+'.jpg',
                                            app = $('#app');

                                        app.html('<img src="'+url+'">"');

                                    }else{
                                        $('#wrap').append('pusto');
                                    }                   
                               }
                        });
            }

および実行コード:

// get a promise:
var promise = ajax();

// give a promise to other function:
resizePromiseImage(promise);
4

2 に答える 2

2

少し異なるアプローチをお勧めします：

function resizePromiseImage() {
  var wW = window.innerWidth,
      app = $('#app'),
      picH = 0,
      ratio = 0,
      picW = app.find('img').width();

      if( wW < picW ){
        app.find('img').css({'width':wW});
      }
});

...では、本編では、ただ...

var promise = ajax();
promise.done(resizePromiseImage);

successここで行うことは、コールバック関数内で promise 自体のプロパティを変更しようとしています。x.successそれは可能ですが (ただし、少し異なる方法で: コード内でwithに置き換えx.doneます)、ほとんど意味がありません。

しかし、実際の問題はそうではないようですpromise-動作したくない画像のサイズを変更することです。この問題は、実際にはその画像の読み込みの遅延によって引き起こされます: app.find('img').width()line が呼び出されると、<img>要素は既に DOM にあります... しかし、実際の寸法はまだ取得されていません (画像がまだここにないため)。

これを回避するには、次のアプローチを使用することをお勧めします: resizePromiseImage を、コールバックではなく、イメージ ロード ハンドラとして設定します。考えられるアプローチの 1 つは、AJAX コールバック関数を変更することです。

// ...
if (data){
   var url = 'http://blabla.bla/bla/'+data+'.jpg',
       $app = $('#app'),
       $img = $('<img>').load(resizePromiseImage).attr('src', url);
   $app.empty().append($img);
}
// ...

これにより、リサイズ機能を変更できるため、追加の検索<img>は必要ありません。

function resizePromiseImage() {
   var $img = $(this),
       picW = $img.width(),
   // ...
}

... 言い換えると、この画像参照がコンテキスト ( this) として関数に渡され、追加のルックアップ ( app.find('img')) はもう必要ありません。これを行うと、その関数を on で呼び出す必要がなくなりますpromise.done。

于 2013-06-02T19:37:00.327 に答える
0

x.success の名前を x.done に変更してみてください。

jQueryのドキュメントによると：

非推奨通知: jqXHR.success()、jqXHR.error()、および jqXHR.complete() コールバックは、jQuery 1.8 で非推奨になりました。最終的な削除に備えてコードを準備するには、代わりに jqXHR.done()、jqXHR.fail()、および jqXHR.always() を使用してください。

于 2013-06-02T19:42:47.030 に答える