1

我要设置从 ajax 接收的图像大小。问题是我不知道如何在成功后准确地触发功能。

我的调整大小功能(当我在 ajax 之后从 chrome 开发控制台自己触发时起作用,但在 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.successx.done),但这没有什么意义。


但看起来实际问题不在于promise- 是关于调整不想工作的图像的大小。问题实际上是由该图像加载的延迟引起的:当app.find('img').width()调用 line 时,<img>元素已经在 DOM 中......但它还没有得到它的真实尺寸(因为图像还没有在这里)。

要解决此问题,您可能需要使用以下方法:将 resizePromiseImage 设置为图像加载处理程序,而不是回调处理程序。一种可能的方法是修改 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'))。如果你这样做,你不再需要在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 回答