2

遅延関数の呼び出しを実装しようとしてdoneいますが、それを行う方法が見つかりません:

jQuery.fn.imageload=function(src) {
    $this=$(this);
    var img=new Image();
    img.src=src;
    if (img.complete) {done();return;}
    img.onload=done;
    function done() {
        console.log('done');
        $this.empty().append(img);
    }
    return $this;
}

$('div').imageload('http://placehold.it/350x150').done(function() {
    //this not called
    console.log('done loading');
});

http://jsfiddle.net/oceog/m4jvd/

.done()画像が読み込まれた後に呼び出すには、プラグイン宣言に何を追加すればよいですか?

4

3 に答える 3

3

http://jsfiddle.net/hnhGR/3/

jQuery.Deferredオブジェクトを使用する必要があります。

$(function () {
    $.fn.imageload=function(src) {
        $this=$(this);
        var img=new Image();
        img.src=src;
        var deferred = $.Deferred();
        img.onload = function() {
            deferred.resolve(img); 
        }
        if (img.complete) {
            img.onload();
        }
        deferred.done(function () {
            console.log('done');
            $this.empty().append(img);
            return img;
        });
        return deferred;
    }

    $('#my-div').imageload('http://placehold.it/350x150').done(function(img) {
        console.log('done loading', img);
    });
});

基本的に、Deferred オブジェクトにはresolve()メソッドがあります。これが発生すると、実行されていた非同期プロセスが終了したことを意味します。done()解決が開始されると、割り当てられたすべてのコールバックがthen()順番に呼び出されます。メソッドに渡す値resolve()は、これらのコールバック (この場合はimg変数) に渡されます。

于 2013-02-17T15:41:48.600 に答える
1

私はするだろう：

jQuery.fn.imageload = function(src) {
    var self = this,
        img = new Image(),
        def = new jQuery.Deferred();

    if (img.complete) {
        def.resolve();
    }
    img.onload = function() {
        console.log('done');
        self.empty().append(img);
        def.resolve(); 
    }
    img.src = src;
    return def.promise();
}

$('div').imageload('http://placehold.it/350x150').done(function() {
    console.log('done loading');
});
于 2013-02-17T15:46:58.017 に答える
0

$.Deferredを利用しようと思います。私はこれがうまくいくと思います：

$.fn.imageload = function(src) {
    $this = this;
    return $.Deferred(function() {
        var self = this,
            img = new Image();
        img.onload = function() {
           $this.empty().append(img);
           self.resolve();
        };
        img.src = src;
    });
}

$('div').imageload('http://placehold.it/350x150').done(function () {
    console.log('done loading');
});

http://jsfiddle.net/k6kuB/

于 2013-02-17T15:42:04.573 に答える