当load()在5秒钟内没有返回时,我想取消一个.load()操作。如果是这样,我会显示一个错误信息,如“抱歉,没有图片加载”。
我有什么
…超时处理:
jQuery.fn.idle = function(time,postFunction){ var i = $(this); i.queue(function(){ setTimeout(function(){ i.dequeue(); postFunction(); },time); }); return $(this); };
…初始化错误消息超时:
var hasImage = false; $('#errorMessage') .idle(5000,function() { if(!hasImage) { // 1. cancel .load() // 2. show error message } });
…图像加载:
$('#myImage') .attr('src','/url/anypath/image.png') .load(function(){ hasImage = true; // do something... });
我唯一无法想像的是如何取消运行的load()(如果可能的话)。
编辑:
解决方法
如果你想要这样的自定义处理,你根本无法使用jQuery.load()函数。你必须升级到jQuery.ajax(),我建议,因为你可以做更多的这一点,特别是如果你需要任何种类的错误处理,这将是必要的。
对jQuery.ajax使用beforeSend选项并捕获xhr。然后,您可以创建回调,可以在超时后取消xhr,并根据需要进行回调。
这段代码没有测试,但应该让你开始。
var enableCallbacks = true; var timeout = null; jQuery.ajax({ .... beforeSend: function(xhr) { timeout = setTimeout(function() { xhr.abort(); enableCallbacks = false; // Handle the timeout ... },5000); },error: function(xhr,textStatus,errorThrown) { clearTimeout(timeout); if (!enableCallbacks) return; // Handle other (non-timeout) errors },success: function(data,textStatus) { clearTimeout(timeout); if (!enableCallbacks) return; // Handle the result ... } });