图像加载$.Deferred() jQuery

Question

我对jQuery很陌生，一个困扰我的问题是网站的加载速度，特别是当网站的内容(如图片)可以被用户上传到任意大小的时候。

我决定深入研究异步映像加载领域，并编写了以下代码：

为了舒适起见，这里是jsfiddle：http://jsfiddle.net/2BSvn/6/

这是代码：

var images = [
    'http://homepages.cae.wisc.edu/~ece533/images/airplane.png',
    'http://homepages.cae.wisc.edu/~ece533/images/baboon.png',
    'http://homepages.cae.wisc.edu/~ece533/images/girl.png',
    'http://homepages.cae.wisc.edu/~ece533/images/tulips.png'
];
function loadImage (images) {

    if (!images.length) {
        return;
    }
    function deferLoading (deferred) {

        var url = images.shift();

        var image = new Image();

        image.onload = loaded;
        image.onerror = errored; 
        image.onabort = errored; 

        image.src = url;

        function loaded() {
            unbindEvents();

            deferred.resolve(image);
            deferred.done(function(image) {

            var img = '\<img src="'+image.src+'" width="200" height="200"   alt="sdfsd" />';
            $('body').append(img);


            });



        }
        function errored() {

            unbindEvents();
            deferred.reject(image);

        }
        function unbindEvents() {

            image.onload = null;
            image.onerror = null;
            image.onabort = null;

        }
    };

    var Deferred = $.Deferred(deferLoading);

    loadImage(images);

    return Deferred;
};

loadImage(images);

我的问题是：图像最终都会被延迟并显示在一起。

我想做的是：显示第一张图像，比第二张，第三张和第四张；

我今天一整天都在努力做这件事，似乎我只是不明白$.Deferred in jQuery的概念。

更新：

我的缺点是，我用本地文件进行测试，它们都加载得太快了，我认为脚本不起作用。我使用来自服务器的文件进行了测试，并且脚本按照预期的方式工作。我的错，对不起。

Answer 1

试一试

var imgs = function (delay) {
    var callback = function () {
           console.log($("img[alt=sdfsd]").size() + " images loaded");
    };
    var images = [
        'http://homepages.cae.wisc.edu/~ece533/images/airplane.png',
        'http://homepages.cae.wisc.edu/~ece533/images/baboon.png',
        'http://homepages.cae.wisc.edu/~ece533/images/girl.png',
        'http://homepages.cae.wisc.edu/~ece533/images/tulips.png'];
    $.when(images).then(function (_imgs) {
        var i = 0;
        var s = setInterval(function () {
            $("<img>", {
                "src": ($("img[alt=sdfsd]").is("*") ? _imgs[++i] : _imgs[i]),
                    "width": "200px",
                    "height": "200px",
                    "alt": "sdfsd"
            })
                .appendTo("body");

            if ($("img[alt=sdfsd]").size() === images.length) {                

                clearInterval(s);
                callback();

            };
        }, delay);

    });
};
imgs(2500);

jsfiddle http://jsfiddle.net/guest271314/67qUJ/