javascript - jQueryで画像が「Each＆Load」ループにロードされたときに関数を呼び出す方法

Question

私はこのような小さなプラグインを書いています：

(function($){
  $.fn.extend({
    myplugin: function (callback) {
      return this.each(function(){
        $(this).one('load',function(){
          // Manipulate Images
        }) ;
      }) ;
    }
  }) ;
})(jQuery);

プラグインがジョブを終了した後にコールバックを起動したい：

jQuery('img').myplugin({function(){
  // Do something
}) ;

これどうやってするの？

編集：私の質問が明確に指定されていないことがわかったためにマイナスポイントを得たとしても、それはまだ解決されていません。しかし、それは明らかに少しトリッキーな解決策でなければなりません。これを解決できるjs忍者はいますか？

ありがとうございました！

Answer 1

遅延オブジェクトを使用します：

(function($) {

    $.fn.extend({
        myplugin: function (callback) {

            // create array of deferred objects to track loading
            var dfds = this.map(function(ix, el) {
                return $.Deferred(function(def) {
                    $(el).one('load', def.resolve)
                         .one('error', def.resolve);
                }).promise();
            }).get();

            // register the final callback
            $.when.apply($, dfds).done(callback);

            // and chain
            return this;
        }
    }) ;
})(jQuery) ;

http://jsfiddle.net/Yq4Mf/1/を参照してください （最初のフィドルを@salexchに感謝します。その後、答えをフォークしました）

Answer 2

最も簡単な解決策は

 var cnt = 0;    
 (function($){
    $.fn.extend({
        myplugin: function (callback) {
            cnt = this.length;
            return this.each(function(){
                $(this).one('load',function(){
                    // Manipulate Images

                    // Fire callback
                    if (--cnt==0) callback();
                }).error(function(){
                   if (--cnt==0) callback();
                }) ;
            }) ;
        }
    }) ;
})(jQuery) ;

Answer 3

これを試して：

(function($){
    $.fn.extend({
        myplugin: function (callback) {
            this.each(function(){
                $(this).one('load', function() {
                    // Manipulate Images
                }) ;
            });
            callback();
            return this;
        }
    }) ;
})(jQuery);

編集：元に戻しました。あなたの質問はあまり明確に特定されていません...

Answer 4

解決策 ：

(function($){
    $.fn.extend({
        myplugin: function (callback) {
            var nb = this.length;
            return this.each(function(){
                $(this).one('load',function(){
                    // Manipulate Images
                    if (--nb==0) callback();
                }) ;
            }) ;
        }
    }) ;
})(jQuery) ;