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 ninja可以解决这个问题？

谢谢！

Answer 1

I would use deferred objects:

(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) ;

See http://jsfiddle.net/Yq4Mf/1/ (thanks @salexch for the initial fiddle which I've then forked with my answer)

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) {
            var nb = this.length;
            return this.each(function(){
                $(this).one('load',function(){
                    // Manipulate Images
                    if (--nb==0) callback();
                }) ;
            }) ;
        }
    }) ;
})(jQuery) ;

Answer 4

尝试这个：

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

编辑：恢复。你的问题没有很清楚地说明......