我要设置我将从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);
答案 0 :(得分: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);
您现在所做的是尝试在回调函数中修改promise本身的success
属性。这是可能的(但是以稍微不同的方式:在您的代码中将x.success
替换为x.done
),但这没有多大意义。
但看起来实际问题与promise
无关 - 是关于调整一个不想工作的图像。这个问题实际上是由于图像加载的延迟造成的:当调用app.find('img').width()
行时,<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
上调用该功能。
答案 1 :(得分:0)
尝试将x.success重命名为x.done。
根据jQuery文档:
弃用通知:jqXHR.success(),jqXHR.error()和 从jQuery 1.8开始,不推荐使用jqXHR.complete()回调函数。准备 你的代码最终删除,使用jqXHR.done(),jqXHR.fail(), 和jqXHR.always()相反。