var image = $( this ), src = element.attr( “data-src” );
if ( src ) {
promises.push(
$.loadImage( src ).then( function() {
image.attr( “src”, src );
}, function() {
image.attr( “src”, “error.png” );
} )
);
}
});
promises.push( panel.slideDownPromise() );
$.when.apply( null, promises ).done(function() { panel.fadeIn(); });
});
这里的窍门是跟踪所有的LoadImage 的promise，接下来加入面板slideDown动画。 因此首次点击按钮时，面板将slideDown并且图像将开始加载。 一旦完成向下滑动面板和已加载的所有图像，面板才会淡入。
在特定延时后加载页面上的图像
假如，我们要在整个页面实现递延图像显示。 要做到这一点，我们需要的HTML的格式如下：
<img data-src=”image1.png” data-after=”1000″ src=”placeholder.png” />
<img data-src=”image2.png” data-after=”1000″ src=”placeholder.png” />
<img data-src=”image1.png” src=”placeholder.png” />
<img data-src=”image2.png” data-after=”2000″ src=”placeholder.png” />
意思非常简单：
•image1.png，第三个图像立即显示，一秒后第一个图像显示
•image2.png 一秒钟后显示第二个图像，两秒钟后显示第四个图像
我们将如何实现呢？
$( “img” ).each(function() {
var element = $( this ),
src = element.attr( “data-src” ),
after = element.attr( “data-after” );
if ( src ) {
$.when(
$.loadImage( src ),
$.afterDOMReady( after )
).then(function() {
element.attr( “src”, src );
}, function() {
element.attr( “src”, “error.png” );
} ).done(function() {
element.fadeIn();
});
}
});
如果我们想延迟加载的图像本身，代码会有所不同：
$( “img” ).each(function() {
var element = $( this ),
src = element.attr( “data-src” ),
after = element.attr( “data-after” );
if ( src ) {
$.afterDOMReady( after, function() {
$.loadImage( src ).then(function() {
element.attr( “src”, src );
}, function() {
element.attr( “src”, “error.png” );
} ).done(function() {
element.fadeIn();
});
} );
}
});
这里，我们首先在尝试加载图片之前等待延迟条件满足。当你想在页面加载时限制网络请求的数量会非常有意义。
结论
正如你看到的，即使在没有Ajax请求的情况下，promise也非常有用的。通过使用jQuery 1.5中的deferred实现 ，会非常容易的从你的代码中分离出异步任务。 这样的话，你可以很容易的从你的应用程序中分离逻辑。
